22

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?

2
  • This doesn't work for me on the twitter bootstrap site with their example, so I am assuming it's not default functionality.
    – Jeemusu
    Aug 17, 2012 at 15:18
  • You need to have the correct jScript attached to the file, it works fine. Aug 17, 2012 at 16:05

4 Answers 4

29

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).

1
  • 3
    +1, You should point out that OP would need to use the link page.html#collapseOne instead of page.html#Alink1 Aug 17, 2012 at 15:53
8

Thanks for your help.
I added functionality so that the code can open Accordions WITHIN Accordions:

$(document).ready(function () {
  if (location.hash){
    $(location.hash).collapse('show');
    $(location.hash).parents('.accordion-body').collapse('show');
  }
});
0
3

You can use the position of the accordion section. The following link opens the third accordion section on a twitter bootstrap (wordpress) accordion.

Link Example: http://www.zfp-bauwesen.de/leistungen/ubersicht#3

Javscript Code:

$( document ).ready(function() {

 if (window.location.hash) {
   var AccordionSectionNumber = window.location.hash.substring(1);
   AccordionBodyID = $(".accordion .accordion-group:nth-of-type(" + AccordionSectionNumber + ") .accordion-heading a").attr('href')
      if (! (typeof AccordionBodyID === "undefined")) {
        $(AccordionBodyID).collapse('show');
        return true;
      }
    }

});
2

Have you tried this:

<a href="page.html#Alink2">Link to some interesting stuff</a>
1
  • 1
    That links to the page, but not to the accordion section. Aug 20, 2012 at 10:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.