views:

27

answers:

1

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?

A: 

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.

Fosco
It really needs to be passed through the query string.
Peachy
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
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
try looking at this other SO question: http://stackoverflow.com/questions/439463/how-to-get-get-and-post-variables-with-jquery
Fosco