javascript: keep state of javascript effect

Question

Hello, rookie here. i am using basic javascript, css to open/close div by clicking/unclicking on checkbox.

function toggleMenu (divId, box) { 
  var vis = (box.checked) ? "block" : "none"; 

  document.getElementById(divId).style.display = vis;
} 

how do i keep the state of the javascript effect. right now if i click on checkbox to open the div and if i refresh the page or hit back, the page would load with checked box but closed div.

many thanks in advance.

Answer 1

Simplest way is to add a call to toggleMenu() at the end of the page.

The right way is to append it to the body.onLoad handler.

The best way is to have a js framework like jquery do the hard stuff so you just add

 $(document).ready(function() {
     toggleMenu()
 });

Answer 2

Cookies would (in my opinion) be the best method of doing this. Check this out: http://www.w3schools.com/JS/js_cookies.asp

-- When a user checks/unchecks the menu, it can create/change the cookie.

document.cookie = "menu_open=yes";

Have an onLoad event check their cookies for the menu_open variable:

get_cookie ("menu_open");

Answer 3

Use a cookie to save state if toggleMenu is called. Register an onload function to fix up the toggle state by checking the cookie when the page is loaded/refreshed.