JQuery hide div based on url hash and string

Question

I'm attempting to hide a div based on the url hash tag. I'm using a jquery plugin called zozo tabs that allows for deep-linking and it shows and hides divs.

There is a particular div on the page (not in the tab area) I would like to hide given the url/s. I've searched but cannot figure it out. Please excuse my javascript noobness!!! I've tried this. No such luck. It doesnt seem to work. Any help would greatly appreciated.

I've tried php but it doesnt work on the hash

To start the plugin creates this type of url

http://localhost:8888/site/funds/#tabbed-nav=fund-strategy

The html is:

 <ul>
    <li data-link="fund-strategy"><a>Fund Strategy</a></li>
    <li data-link="portfolio-characteristics"><a>Portfolio Characteristics</a></li>
    <li data-link="performance"><a>Performance</a></li>
</ul>

<div class="strategy">This copy shows when the li is clicked on</div>

This is me attempting to hide a div given the url with js

var jQ = jQuery.noConflict();
jQ(document).ready(function() { 
    var url = document.location.href;

    if (url.indexOf('http://localhost:8888/site/funds/#tabbed-nav=fund-strategy') >= 0) {
        jQ('.fourth').hide();
    };
});


<div class="fourth">Hide me please!</div>

cb0 · Accepted Answer · 2013-10-04 10:24:06Z

1

Just try to use something like this:

var currentHash = window.location.hash;
if (currentHash=="#tabbed-nav=fund-strategy") {
   $('.fourth').hide();
}

Be sure that there is a html element with class 'fourth' in your html code. Otherwise this will not hide anything.

edited Oct 4, 2013 at 10:24

answered Oct 1, 2013 at 20:02

cb0

8,6739 gold badges57 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lnickel Over a year ago

Technically both answers should work however they dont. Could it be because of the data-link and not the use of id/# on the document itself.

mjk Over a year ago

window.location.hash includes the leading "#". Thus the correct comparison is ...currentHash == "#tabbed-nav=fund-strategy"...

lnickel · Accepted Answer · 2013-10-02 13:36:48Z

0

I think i pinpointed the problem. The zozo tabs utilizes hashchange. So after hitting my head against the wall and HUGE inspiration from users here. I downloaded the ba.hashchange and wrapped the given answers in a hashchange function here is the code if anyone is interested. This seemed to work.

var jz = jQuery.noConflict();
jz(function(){
  jz(window).hashchange( function(){
  // Alerts every time the hash changes!
    var hash = document.location.hash;

    if (hash == '#tabbed-nav=risk' || hash == '#tabbed-nav=fund-strategy') {
        jz('.fourths').show();  
    } else {
        jz('.fourths').hide();  
    }

})
   jz(window).hashchange();

 });

answered Oct 2, 2013 at 13:36

lnickel

3511 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery hide div based on url hash and string

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related