Show hidden div constantly on website after clicking <a> href link once

Question

Show hidden div forever kicks website after clicking href link once

An example of how this should work: First, a div with a small heading is hidden, but when you click on the parent page (page 1) (the small heading) becomes visible on the website, even if you enter a new page or update 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 that this is done by jQuery. Everything will be a big help. Hooray!

Answer 1

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

In response to your comment below, I added logic so that if this script is included on multiple pages, it will work independently for each page. I do this using Window.location to store 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'); } } 

Answer 2

As @Barmar and @Tiny Giant said, localStorage works well and is very easy to use. Here is the 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/