Show hidden div in page after clicking link to open the page

Question

I have an HTML page in which a hidden div becomes visible when a button is clicked. Something like this:

$('#display').click(function(){
    $('#itemList').removeClass('hide');
    ...
})

On another page, there is a link which when clicked takes the user back to the earlier page, and the element with id='itemList' on that page has to become visible. The code is something like this:

<a href='firstHTML.php'> View items</a>

I am not sure what else to add to the code to make the other page appear with the previously hidden element visible. Can somebody help please?

you will most likely have to use a global variable that persists through the pages, or you will have to use a URL parameter. — li0n_za, Sep 21 '15 at 11:42

score 2 · Accepted Answer · answered Sep 21 '15 at 11:55

One of the most probable solution is localStorage .Where as you may also implement Cookies or string query to pass value to other page.

I am showing the use of localstorage , you may store the id in localStorage on click of anchor as below

<a href='firstHTML.php' data-showId='itemList'> View items</a>

Now bind event on anchor

$("[data-showId]").bind('click',function(){
    var idToShow=$(this).attr('data-showId');
    if(idToShow)
      store('visibleId', idToShow);
});

Now all you need to define these functions .

   function setup() {
        var tmp = get('visibleId');
        if (tmp)
          showDiv(tmp);
    } 
    function showDiv(cls) {
        $("#"+cls).removeClass('hide');
    }
    function get(name) {
        if (typeof (Storage) !== "undefined") {
          return localStorage.getItem(name);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }
    function store(name, val) {
        if (typeof (Storage) !== "undefined") {
          localStorage.setItem(name, val);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }

Now call setup() on dom ready..

localStorage is a great solution to this problem. I wouldn't advocate the alerts for older browsers, though; better just to not support this functionality than impose an unnecessary user requirement. — Bobby Jack, Sep 21 '15 at 12:10

score 0 · Answer 2 · edited May 23 '17 at 11:58

First of all, I would use the jQuery function to hide/show the List instead of using an own CSS class for it:

$('#display').click(function(){
    $('#itemList').show();
    ...
})

Then a possible approach for your problem could be to use a get Parameter for this, for example:

<a href='firstHTML.php?list=show'> View items</a>

And with jQuery

Create a helperfunction (Taken from Get url parameter jquery Or How to Get Query String Values In js):

$.urlParam = function(name) {

  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

  if (results==null){
    return null;
  }else{
   return results[1] || 0;
  } 
}

Read out the property:
```
var listStatus = $.urlParam('list');
```

Unhide the list in case it should be shown:

$( document ).ready(function() { 
  if(listStatus == 'show') {
    $('#itemList').show();
  }
});

Show hidden div in page after clicking link to open the page

2 Answers2