Triggering slidetoggle via the URL hash

I have a slide toggle that is working at the moment,but what i want also is to be able to open automatically based on the hash in the URL

so for example if i have something like www.website.com/#Compliance
it should open the block after href=“#compliance

here is my HTML


<h2 class="trigger"><a href="#Partnering and Business Development">Partnering and Business Development</a></h2>
			<div class="toggle_container">
				<div class="block">
					<p>
			    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
					Quisque vel nisi id erat hendrerit rutrum. Curabitur ut arcu erat. 
					Aenean quis nunc in erat blandit mattis. Aenean quis neque lorem. 
					Phasellus aliquet, massa tincidunt vehicula ullamcorper, lacus orci 
					faucibus tortor, id facilisis lacus leo nec felis. Vestibulum faucibus 
			        </p>
				</div>
			</div>
			
		
			<h2 class="trigger"><a href="#Fundraising">Fundraising</a></h2>
			<div class="toggle_container">
				<div class="block">
					<p>
			    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
					Quisque vel nisi id erat hendrerit rutrum. Curabitur ut arcu erat. 
					Aenean quis nunc in erat blandit mattis. Aenean quis neque lorem. 
					Phasellus aliquet, massa tincidunt vehicula ullamcorper, lacus orci 
					faucibus tortor, id facilisis lacus leo nec felis. Vestibulum faucibus 
			        </p>
				</div>
			</div>

here is my JS


$(document).ready(function(){
	 //Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide();
		
    // Check for hash value in URL
    var hash = window.location.hash;
    var href = $('h2.trigger').find('a').each(function(){
        var href = $(this).attr('href');
        if(hash==href){
		
		  $(this).toggleClass("active").next().slideToggle("slow");
        }
    });
		
		//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
		$("h2.trigger").click(function(){
		
			$(this).toggleClass("active").next().slideToggle("slow");
		});
		
	
});

How odd. A test page that I’ve just now created appears to work perfectly fine with the above code.

Perhaps if you furnish us with a test page that demonstrates the problem, we can investigate further to determine the cause.

Yeah is accordion, but am looking for a way to control the open content using the hash

Typically the hash is the unique identifier of the code block to show, so that when the page loads you can do something like:


var id = '';
if (location.hash) {
    id = location.hash.split['#'][1];
}
if (document.getElementById(id)) {
    document.getElementById(id).style.display = 'block';
}

It sounds like you’re wanting each link to open an associated section of content. This is commonly called an accordion technique.

Is the example at http://docs.jquery.com/UI/Accordion#overview-example something like what you’re wanting to achieve?

But i have this code swhich works fine in firebug but not when i load the page


 $(document).ready(function(){
	//Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide();
		
    // Check for hash value in URL
	var content = $('#content');
	var tabsNav = content.find('h2.trigger');
	var hashTab = tabsNav.find('a[href='+ window.location.hash +']');
	var hash = window.location.hash;
    var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
	
	if (hashTab.size() > 0 ){
		content.find('a[href*='+ thash + ']').closest('h2').trigger('click');
	
	}
	
	
		
		//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
		$("h2.trigger").click(function(){
			$(this).toggleClass("active").next().slideToggle("slow");
		});
		
	
});