Show hidden div permanently throughout website after clicking on a href link once

Question

Show hidden div permanently throw out website after clicking on a href link once

An example how this should work: The (little-header) div is hidden in the start, but when clicking once on the parent page e.g.(page 1) the (little-header) gets visible throughout the website even though you enter a new page or refresh the site.

 <div class="big-header">
  <ul>
    <li>
      <a href="#">Page 1</a>
    </li>
    <li>
      <a href="#">Page 2</a>
    </li>
    <li>
      <a href="#">Page 3</a>
    </li>
  </ul>
</div>
<div class="little-header">
   <ul>
    <li>
      <a href="#">Sub Page 1.1</a>
    </li>
    <li>
      <a href="#">Sub Page 1.2</a>
    </li>
    <li>
      <a href="#">Sub Page 3.3</a>
    </li>
  </ul>
</div>

http://jsfiddle.net/ctL6T/179/

I can imagine this being done by Jquery. Anything would be a big help. Cheers!

Set a cookie or use localStorage to tell which DIVs should be shown. When the page reloads, check the cookie and show those DIVs. — Barmar, Jul 03 '15 at 01:58

score 5 · Answer 1 · 2015-07-07T22:46:32.583

5

You can use Window.localStorage to store a flag if the menu has been shown, then use a script like this to only execute the show function once.

In response to your comment below, I've added logic so that if this script is included on multiple pages then it will work independently for each page. I do this by using Window.location to store the information separately for each page visited.

(Demo)

var hide = localStorage[location] ? false : true;
var hidden = document.querySelector('.little-header');
if(hide) {
    hidden.style.display = 'none';
    document.onclick = function() {
        localStorage[location] = true;
        hidden.style.display = '';
        document.onclick = '';
        console.log('click');
    }
}

edited Jul 07 '15 at 22:46

answered Jul 03 '15 at 02:00

Thanks @Tiny Giant this works great, now how would I make it RESET this function when goning to another page e.g. mywebsite.com/anotherpage/? anytinhg that comes after /? will not get RESET???? localStorage.clear(); somthing?? – user3603497 Jul 05 '15 at 01:10
@user3603497 I've updated the code above. The way this will function is that it will store the flag for each page. This doesn't "reset" per se, so when you visit a new page on your website it will seem like it resets, but when you navigate back to a page that you've already "clicked" then it will still be open. If this is not the functionality you're looking for then I can make it work the other way. – Jul 07 '15 at 22:49

score 3 · Answer 2 · answered Jul 03 '15 at 02:10

As @Barmar and @Tiny Giant have said, localStorage works well and is very easy to use. Here's a jQuery version.

$(function () {
    var showLittleHeader = localStorage.getItem('show_little_header');
    if (showLittleHeader) {
        $('.little-header').show();
    }
    $('.big-header').on('click', 'a', function () {
        localStorage.setItem('show_little_header', 1);
        $('.little-header').show();
    });
});

Fiddle: http://jsfiddle.net/wqpjfvy7/

Show hidden div permanently throughout website after clicking on a href link once

2 Answers2

Linked