www.webdeveloper.com
Results 1 to 8 of 8

Thread: Accordion open on anchor from another page

  1. #1
    Join Date
    Oct 2006
    Posts
    16

    resolved Accordion open on anchor from another page

    Hi all,

    So I am sure this is possible, but not sure how to implement it.

    I have a link on a page that when clicked opens another page that contains a list of items with subitems that are contained in a closed accordion. I would like to click on the first page's link and have it load the second page and open the corresponding accordion list.

    For example:

    Code:
    <a href="link1.html#acord1>Link 1</a>, found on page.html, opens link1.html and anchors to #acord1. #acord1, by default, is a closed accordion. How can I have #acrod1 an open accordion when I click on the link1.html#acord1 on page.html?
    There are multiple selections on link1.html... #acord1, #acord2, #acord3... etc...
    Thanks!

  2. #2
    Join Date
    May 2007
    Posts
    129
    if you register a function to be called when the document is loaded you can check the hash in the url and open the correct accordion.

    Get the hash with:

    Code:
    var hash = window.location.hash.substring( 1 );

  3. #3
    Join Date
    Oct 2006
    Posts
    16

    Pass Var

    Hi,

    Thanks for the response. I am using JQuery for this little js. I am not much of a JS person. I understand the basics though.

    I do get how the HASH works and do get the correct ID out of the URL. How do I go about passing that HASH variable into this document.ready?

    Code:
    function initMenu() {
      $('#menu ul').hide();
      $('#menu li a').click(
        function() {
            $(this).next().slideToggle('normal');	
          }
        );
      }
    $(document).ready(function() {initMenu();});
    Do I use something like:
    Code:
     $('#menu li a').onload(
        function() {
            $(hash).next().slideToggle('normal');	
          }
        );

  4. #4
    Join Date
    May 2007
    Posts
    129

    Post

    I am guessing here, but I think this might work:

    Code:
    function initMenu() {
      var hash = window.location.hash.substring( 1 );
    
      if( hash ) {
        var accordItem = $( '#menu li a#' + hash );
        if( accordItem ) accordItem).next().slideToggle( 'normal' );
      }
    
      $('#menu ul').hide();
      $('#menu li a').click(
        function() {
            $(this).next().slideToggle('normal');	
          }
        );
      }
    $(document).ready(function() {initMenu();});

  5. #5
    Join Date
    Oct 2006
    Posts
    16
    HI Web Bert,

    Thanks for the reply, that almost worked. When I moved the if() statement below the .click() function it worked great.

  6. #6
    Join Date
    Oct 2006
    Posts
    16
    So I have it working like this:
    Code:
    Copyright 2007 by Marco van Hylckama Vlieg
    web: http://www.i-marco.nl/weblog/
    email: marco@i-marco.nl
    Free for non-commercial use
    */
    
    function initMenu() {
      var hash = window.location.hash.substring( 1 );
      
      $('#menu ul').hide();
      $('#menu li a').click(
        function() {
            $('#menu ul').hide('normal');	
            $(this).next().slideToggle('normal');
        }	
       );
      
      if( hash ) {
       var accordItem = $('#menu li a#' + hash);
       if(accordItem) accordItem.next().slideToggle('normal');
      }
    }
    $(document).ready(function() {initMenu();});
    ...but it is not working like this:

    Code:
    function accord() {
    	var hash = window.location.hash.substring( 1 );
    	
    	$(".accordion div").hide();
    	
    	$(".accordion h3").click(function(){
    		$(this).next("div").slideToggle("fast")
    		.siblings("div:visible").slideUp("fast");
    		$(this).toggleClass("active");
    		$(this).siblings("h3").removeClass("active");
    	});	
    	
    	if(hash) {
    		var accordItem = $('.accordion h3 a#' + hash);
    		if(accordItem) accordItem.next('div').show();
    	}
    
    	
      }
    $(document).ready(function() {accord();});
    What is the difference? My accordion is coded like this:

    HTML Code:
    <div class="accordion">
    <h3><a href="#">Computer Software</a></h3>
    	<div>
            <ul>
              <li><a href="computer-software.php#software-1">Software 1</a></li>
              <li><a href="computer-software.php#software-2">Software 2</a></li>
            </ul>
    	</div>
    ...........................
    </div>
    I used firebug and can see that accordItem is getting the correct HASH, but when I tell it to toggle the 'div' it doesn't. What am I missing here?

    Thanks!

  7. #7
    Join Date
    Oct 2006
    Posts
    16

    Post

    I figured it out. I needed to change where the HASH was in my HTML. It didn't like
    Code:
    <h3><a href="#" id="software-1">Software 1</a></h3>
    , but did like
    Code:
    <h3 id="software-1"><a href="#">Software 1</a></h3>
    Code:
    	if(hash) {
    		var accordItem = $('.accordion h3#' + hash);
    		if(accordItem) accordItem.next('div').slideToggle('fast');
    	}
    Now, why wouldn't it just traverse to the <a> and grab the hash????

  8. #8
    Join Date
    Oct 2006
    Posts
    16
    Getting a little deeper into this...

    Does anyone have an idea of it would be possible to OPEN the correct Accordion(h3) and then scroll to and highlight the h4 id?

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles