Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Linking to a section of an Accordion from another page

Tags:

I'm using twitter-Bootstrap 2.04, and I'm using the latest jQuery. I'm trying to make a link that will go from one page to the page containing this accordion, and then activate the appropriate accordion section. This is the accordion:

 <div class="accordion-group">           <div class="accordion-heading">             <a name="Alink1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">             <strong>Title</strong>             </a>           </div>           <div id="collapseOne" class="accordion-body in collapse" style="height: auto; ">             <div class="accordion-inner">              some random content             <div>           </div>  </div>  <div class="accordion-group">           <div class="accordion-heading">             <a name="Alink2" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">             <strong>Title 2</strong>             </a>           </div>           <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">             <div class="accordion-inner">              some random content 2             <div>           </div>  </div> 

This is the link:

  <a href="page.html/#Alink2">Link to some interesting stuff</a> 

With linking to just a bit in the page works fine usually, do I need to use Javascript to activate it?

like image 817
Maverick Jones Avatar asked Aug 17 '12 15:08

Maverick Jones


1 Answers

Yes, you will need to manually activate it on page load. Something like the following should work:

$(document).ready(function () {   location.hash && $(location.hash + '.collapse').collapse('show'); }); 

Also, as @SaadImran pointed out, this assumes that you link to the collapsible element id (eg., #collapseTwo) rather than the name in the anchor (eg., #Alink2).

like image 62
merv Avatar answered Oct 20 '22 10:10

merv