jQuery to trigger event through query string

Question

I have two separate jQuery functions that allow a user to toggle a div's visibility. By defualt, the divs will be in their closed state. I'm trying to figure out a way to set up links to this page that will open a specific div based on an ID passed to the query string. My jQuery looks like this:

    jQuery(document).ready(function(){

   //make first div always open

    jQuery(".toggle_container:not(:first)").hide(); 
    jQuery(".toggle_container:first").show();
    jQuery("h6.trigger:first").addClass("active");

    jQuery("h6.trigger").click(function(){
      jQuery(this).toggleClass("active");
      jQuery(this).next(".toggle_container").slideToggle(300);
    });

    //The second function

    jQuery(function(){
        jQuery(".toggleIt").click(function(){
          jQuery(this).next(".hiddenText").slideToggle("fast"); 
            jQuery(this).html(function(i,html) {
                if (html.indexOf('+') != -1 ){
                   html = html.replace('+','-');
                } else {
                   html = html.replace('-','+');
                }
                return html;
            })
        });
    });

HTML

<h6 class="trigger" id='uniqueID"></h6>
 <div class="toggle_container">
TEST
</div>

//and the second toggled container
 <p class="toggleThis tips" id="AnotherID">+</p>
<div class="hiddenText2">
Another TEST
</div>

I'd like to add an ID to the query string of a url and have it open the hidden div with the same ID. I have it structured like this so far...

var category = getParameterByName('cat');
var id = getParameterByName('id');

if(id)
{

}
else if(category)
{

}
else
{
    //moving this in here 
    jQuery(".toggle_container:not(:first)").hide(); 
    jQuery(".toggle_container:first").show();
    jQuery("h6.trigger:first").addClass("active");
}

I'm getting stuck on this part. Any tips?

score 0 · Answer 1 · answered Jul 08 '10 at 16:50

0

Are you using PHP or another language to create the HTML?.. I would create a hidden field, populated with the query variable, and use the onLoad to open the div if the field has been populated.

answered Jul 08 '10 at 16:50

Fosco

38,138
7
87
101

It really needs to be passed through the query string. – Peachy Jul 08 '10 at 17:20
Yes, I agree... You pass it through the query string. Your page creation language embeds it as a value in an HTML input element. jQuery picks that up and acts on it. – Fosco Jul 08 '10 at 17:33
Perhaps I misunderstood. I do need to keep this on the front end though. I'm fairly sure there is a way to fire a click event, or use a hash + var to trigger this. Just can't nail it down. Thanks though! – Peachy Jul 08 '10 at 18:03
try looking at this other SO question: http://stackoverflow.com/questions/439463/how-to-get-get-and-post-variables-with-jquery – Fosco Jul 08 '10 at 18:10

jQuery to trigger event through query string

1 Answers1