Toggle Visibility - Show/Hide - Remain shown when toggled

Question

I have this piece of code which works great but, I would like the div to remain open if clicked on when the page is refreshed. ex. the user views a link and then returns to the previous page. The link is an image and the page(div) is a menu of images.

<div id="block1-1">
    <a name="works"></a>
    <a href="#block1-1" onclick="toggle_visibility('block1-1');"><h2>works</h2></a>
</div>

<script type="text/javascript">

   function toggle_visibility(id){
       var e = document.getElementById(id);

       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }

</script>

Why the jQuery tag? Also, if you want to persist changes on a reload, you need to store a variable somewhere. A cookie, a database, localstorage, etc. — j08691, Apr 28 '14 at 17:36
You can use anchor links. Your problem is similar to [linking to tabbed content](http://stackoverflow.com/questions/12964070/). The difference is if you want to support a use case where the surfer opens a div, closes the browser and reopens it. In this use case you have to use a cookie, or a database or localstorage. — surfmuggle, Apr 28 '14 at 17:44
ok,I believe a cookie would do the trick. Being this is a website it could remember the last state. What would the code look like? I am new to javascript and am struggling a bit. Thanks — user3582339, Apr 28 '14 at 18:04
There are so many jquery plugin to save data locally in browser. You can try [jStorage](http://www.jstorage.info/) . jStorage supports all major browsers. — Hannan Hossain, Apr 28 '14 at 18:23

jonode · Accepted Answer · 2014-05-05T12:48:56.460

3

Local Storage is probably the simplest solution (only works on some browsers).

Modify your function to include the local storage code:

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block'){
      e.style.display = 'none';
      localStorage.setItem("show", false);
    }
    else{
      e.style.display = 'block';
      localStorage.setItem("show", true);
      localStorage.setItem("id", e);
    }
    };

Then you'd need to incorporate this:

window.onload=function(){
  if(localStorage.getItem("show")){
    var e = localStorage.getItem("id");
    e = document.getElementById("e");
    e.style.display = 'block';
  }
}

edited May 05 '14 at 12:48

answered Apr 28 '14 at 17:54

jonode

797
4
15

I believe I am inputing the code right. But,The div no longer opens(shows) when I change it to the above code. – user3582339 May 01 '14 at 03:40
I messed up the brackets. I have edited my answer to fix the issue. – jonode May 01 '14 at 13:06
yes, that did fix the show/hide issue. But,unfortunately the divs remain closed on refresh and link back. – user3582339 May 03 '14 at 00:57
Ah, fix the second bit of code I have updated. The problem was we identified the ID without specifying what to do with it. – jonode May 05 '14 at 12:49

score 0 · Answer 2 · answered Apr 28 '14 at 17:56

0

You have to give display style for the div

<div id="block1-1" style="display:block;">

answered Apr 28 '14 at 17:56

Vishnuraj V

2,819
3
19
23

Toggle Visibility - Show/Hide - Remain shown when toggled

2 Answers2