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?
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
).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With