CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3033194
user3033194

Reputation: 1821

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

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?

Upvotes: 0

Views: 1086

Answers (2)

Rohit Kumar
Rohit Kumar

Reputation: 1958

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..

Upvotes: 2

Xavjer
Xavjer

Reputation: 9226

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

  1. 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;
  } 
}

  2. Read out the property:

    var listStatus = $.urlParam('list');

  3. Unhide the list in case it should be shown:

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

Upvotes: 0

Related Questions