Show display: none div after update

Question

I don’t know how to raise the question! I have a div that is displayed by clicking a button. The problem is that if the user goes to the next page (by clicking another button) and then returns to the old page, the div will not be displayed because the page is being updated, so the user needs to click the button again to see the div.

Is there a way to keep the div displayed after clicking the button for the first time?

<div id="tableDiv" style="display:none;" > <table> <td>something</td> </table> </div> <input type="button" value="Show" onClick="showTable()"/> <script type="text/javascript"> function showTable() { document.getElementById('tableDiv').style.display = "block"; } </script> 

Answer 1

You can use html5 webStorage for this:

localStorage does not expire, while sessionStorage is deleted when the browser is closed (using both is equivalent). WebStorage supports all major browsers and IE> = 8

Plain javascript

 function showTable() { document.getElementById('tableDiv').style.display = "block"; localStorage.setItem('show', 'true'); //store state in localStorage } 

And check onLoad status:

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

JQuery

 function showTable() { $('#tableDiv').show(); localStorage.setItem('show', 'true'); //store state in localStorage } $(document).ready(function(){ var show = localStorage.getItem('show'); if(show === 'true'){ $('#tableDiv').show(); } }); 

Demo

PS To remove an item from localStorage, use

 localStorage.removeItem('show'); 

Link

webStorage

Answer 2

Use localstorage to save state

 <script type="text/javascript"> function showTable() { document.getElementById('tableDiv').style.display = "block"; localStorage.setItem('showTable', true); //set flag } function hideTable() { document.getElementById('tableDiv').style.display = "none"; localStorage.removeItem('showTable'); //remove key } if (localStorage.getItem('showTable')) { //see if flag is set (returns undefined if not set) showTable(); //if set show table } </script> 

Answer 3

I think your best option is to use location.hash as a JavaScript router. Basically change the hash, observe the changes in the hash, and if the hash is a certain value, do something. Then, when the leaves and strokes used are “returned”, they return to the page with the previous hash, in which case you can determine which version of the page they were included in and recreate.

 <div id="tableDiv" style="display:none;" > <table> <td>something</td> </table> </div> <input type="button" value="Show" onClick="showTable()"/> <script type="text/javascript"> function showTable(){ location.hash = "#show"; // sets hash to #show, which will fire onhaschange event which its handler is hashRouter() } function hashRouter(){ if(window.hash == "#show"){ // shows table if hash is #show document.getElementById('tableDiv').style.display = "block"; } } window.onhashchange = hashRouter; // Calls when hash is changed. window.onload = hashRouter; // Calls when page loads; </script> 

There are many other options like cookies or localstorage.

Check out this plugin:

https://github.com/addcms/addHashRouter

Using this solution, you can do something like this:

HTML

 <div id="tableDiv" style="display:none;"> <table> <td>something</td> </table> </div> <a href='#show'>Show Table</a> 

Javascript

 $add.UI.hashRouter.add("show", function(){ document.getElementById('tableDiv').style.display = "block"; }); 

And then, if they click the "Back" button after moving from the page, it will still appear, and if they hit the "Back" button after the table is displayed, it will not "return" it if you did not add this:

HTML

 <a href='#hide'>Hide Table</a> 

Javascript

 $add.UI.hashRouter.add("hide", function(){ document.getElementById('tableDiv').style.display = "none"; }); 

And then you can use the show / hide buttons with browser navigation.

Answer 4

Using @DustinPoissant's answer, I made something a little easier.

You can use the :target selector to style an element and save some code.

Like this:

 <style> #tableDiv {display:none;} #tableDiv:target {display:block!important;} </style> <div id="tableDiv"> <table> <tr> <td>something</td> </tr> </table> </div> <input type="button" value="Show" onClick="showTable()"/> <input type="button" value="Hide" onClick="hideTable()"/> <script type="text/javascript"> function showTable() { location.hash='tableDiv'; } function hideTable() { location.hash=''; } </script> 

The :target selector will match when the "hash" at your address matches the identifier of this element.

Answer 5

you can achieve this with a cookie. there is a nice easy jquery cookie for this.

so set a cookie:

 $.cookie("var", "10"); 

to get a cookie:

 $.cookie("var"); 

To delete a cookie:

 $.cookie("var", null); 

and now you can do something like:

 function showTable() { document.getElementById('tableDiv').style.display = "block"; $.cookie("var", "1"); } function leaveButtonOpen(){ if($.cookie("var") == 1){ document.getElementById('tableDiv').style.display = "block"; } }