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?