Für meine Typo3-Erweiterung nettgrids habe ich ein Accordion-Element (Bootstrap Collapse) erstellt. Für ein Projekte wollte ich jetzt erreichen, dass über einen Link jeweils der passende Tab geöffnet wird.

Nach etwas Experimentieren mit Anregung von https://stackoverflow.com/questions/22254248/bootstrap-3-expand-accordion-from-url#answer-33444574 bin ich zu folgendem Javascript gekommen:

<script type="text/javascript"> $("a").click(function () {     
  function show_tab(){
   if(location.hash != null && location.hash != "")
   {         $('.collapse').removeClass('in');
             $(location.hash + '.collapse').collapse('show');     
   }
    }
    window.setTimeout(show_tab, 100);
  }); 
</script>

Das Script kann man einfach in ein HTML-Element vor dem Accordion packen.

Im vorliegenden Listing wird die Javascript-Funktion gestartet, wenn auf einen Link auf der Seite geklickt wird. Man könnte es auch an andere Ereignisse koppeln.

In der Funktion show_tab wird überprüft, ob ein Anker-Links vorhanden ist. Wenn ja, dann wird der aktuelle Tab geschlossen und der Zieltab geöffnet. Um die Funktion herum liegt eine Funktion zur Verzögerung. Ohne Verzögerung wäre der neun Link mit dem Anker-Ziel noch aktuell und der Aufruf käme zu früh. Die Verzögerung ist hier auf 0,1 Sekunden eingestellt.