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

Answer 1

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.

  

    
something
  

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

  

    
something
  

Show Table

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

Hide Table

JavaScript

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

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