Accordion open on anchor from another page

This site is best viewed in a modern browser with JavaScript enabled.

Accordion open on anchor from another page

buildakicker

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:

<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!

web_bert

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:

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

buildakicker

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?

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
        $(this).next().slideToggle('normal');	
      }
    );
  }
$(document).ready(function() {initMenu();});

Do I use something like:

 $('#menu li a').onload(
    function() {
        $([B]hash[/B]).next().slideToggle('normal');	
      }
    );

web_bert

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


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();});

buildakicker

HI Web Bert,

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

buildakicker

So I have it working like this:

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:

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:

<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!

buildakicker

I figured it out. I needed to change where the HASH was in my HTML. It didn't like

<h3><a href="#" id="software-1">Software 1</a></h3>

, but did like

<h3 id="software-1"><a href="#">Software 1</a></h3>

	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????

buildakicker

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