CODEWITHSUNDEEP
jquery
Jesse
Jesse

Reputation: 67

Link to a page and trigger toggle event on div

I am using Jquery to toggle a hidden (by default) div on page 1.

$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

What I need to be able to do is link to page 1 from page 2 as well as open the hidden div in the same event.

I'm hoping someone can shed some light on a simple execution of this? Cheers!

Upvotes: 0

Views: 1229

Answers (2)

Lee
Lee

Reputation: 13542

on page 2:

<a href="page1.html?panel_open=1"> click me </a>

on page 1:

$(document).ready(function() {
    // parse the query params
    var url_params = (window.location.search.substr(1)
      .split('&')
      .reduce(function(prev, curr) { 
          curr = curr.split('='); 
          if( curr.length > 1 ) { prev[curr.shift()]=curr.join('='); }
          return prev; 
      }, {}));

    if( url_params.panel_open ) {
        // if "panel_open" was passed in the URL, then open the panel
        $(".panel").toggle("fast");
    }
});

Edit: made a couple of minor changes in the query string parsing code above, to improve robustness in a few edge cases.

Update

Older browsers (including IE8) don't support the reduce() function. So, here's a version of the code above that doesn't use that function:

$(document).ready(function() {
    var parts = window.location.search.substr(1).split('&');
    var url_params = {};
    for (; parts.length ;) {
        var curr = parts.shift().split('=');
        if (curr.length > 1) {
            url_params[curr.shift()] = curr.join('=');
        }
    }

    if( url_params.panel_open ) {
        // if "panel_open" was passed in the URL, then open the panel
        $(".panel").toggle("fast");
    }
});

Upvotes: 1

Slappy
Slappy

Reputation: 4092

Since events don't persist across pages I would recommend using another strategy like passing a parameter or hash link in the query string that the receiving page can interpret and open the div in question.

Upvotes: 0

Related Questions