Show a hidden div after page reload ( div becomes visible after page reload )

Question

I have a page with several hidden divs and buttons with click events, on which divs becomes visible.

The problem is when I reload the page, all divs are hidden again.

Actually when I click some of the buttons, some of the divs becomes visible, but when I reload the page all divs are invisible again.

Can I make divs which were visible before the page reload to be visible after the reload?

Example http://jsfiddle.net/DxKCj/1/ .

Answer 1

Of course they will be invisible again. That is how HTML/JavaScript is supposed to behave. When you reload the page, the browser throws away the current state and "compiles" the page all over again. It is like running running a simple C program, exiting it, and running it again. If you want to save the state of the Divs, you will have to save it somewhere. You can either save it using HTML5 local storage, or in the cookies. You can do both of these through JavaScript.

Answer 2

Yes. Don't bother using a session - just set a cookie. Google "javascript setcookie" and you'll find everything you need - store which divs are visible in the cookie, and then check the cookies value when the page loads. `

Answer 3

Check out the following answer:

create session with jquery?

You can make an ajax call to a PHP page which will create a session. You can then do a simple IF when the page loads to see if the session is set to 1 or 0. If it's 1, display the div, if not, remove it.

Simply make the AJAX call when the user clicks the button. If you need more specific code, let me know