SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Code HTML4Strict:
    <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
    Code JavaScript:
    $(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");
    		});
     
     
    });

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah is accordion, but am looking for a way to control the open content using the hash

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Typically the hash is the unique identifier of the code block to show, so that when the page loads you can do something like:

    Code javascript:
    var id = '';
    if (location.hash) {
        id = location.hash.split['#'][1];
    }
    if (document.getElementById(id)) {
        document.getElementById(id).style.display = 'block';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But i have this code swhich works fine in firebug but not when i load the page

    Code JavaScript:
     $(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");
    		});
     
     
    });

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •