show display:none div after refresh

Question

Don't know how to put the question title correctly! I have a div that is displayed by button click. The problem is that if user goes to next page(by clicking another button) and then come back to the old page the div is not shown because page is refreshed, so user needs to click the button again to see the div.

Is there any way to keep div displayed after button clicked for 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 the html5 webStorage for this:

localStorage does not expire, whereas sessionStorage gets deleted when the browser is closed (usage of both is equivalent). The webStorage is support by 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 the state onLoad:

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

P.S. To remove an item from the localStorage use

localStorage.removeItem('show');

Reference

webStorage

Answer 2

Use localstorage to save the 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 the location.hash as a JavaScript Router. Basically modify the hash, watch for hash changes and if the hash is equal to a specific value do something. Then when the used leaves and hits "back", they will come back to the page with the previous hash, in which case you can detect which version of the page they were on and recreate it.

<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 such as cookies or localstorage.

Check out this plugin:

https://github.com/addcms/addHashRouter

Using this solution you might 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 hit the "back button" after navigating away from the page it will still appear, and if they hit the back button after showing the table it will not "rehide" it, unless you added 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 show/hide buttons with browser navigation.

Answer 4

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

You can use the selector :target to style the element, and save you 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' on your address matches the id of that element.