Develop Reference

Expanding accordion based on anchor

Is there a way to expand Bootstrap accordion based on an URL anchor?
For example if I load the page with the following URL: /mypage#headingOne I'm using PHP but I understand that none of the URL part after # is passed via server. Perhaps this could be done via JS?..
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>

Here is a pure js implement without jQuery live demo. you could place the code below at bottom of your html body.
(function() {
// change location hash when toggle a accordion item.
document.querySelectorAll('.accordion-button').forEach(function(btn) {
btn.addEventListener('click', function() {
window.location.hash = '#' + this.parentNode.id;
});
});
if (!window.location.hash) return;
// show accordion item based on location hash.
let act = document.querySelector(window.location.hash)
if (act) {
let btn = act.querySelector('.accordion-button');
if (btn && !btn.parentNode.parentNode.querySelector('.collapse.show')) {
btn.click();
}
}
})();

Bootstrap collapse are making an overlay on next Bootstrap collapse header

So I am making a website as my wishlist this year. Every wish has a collapsible menu (made with Bootstrap collapse) and something is not right.
Problem illustrated in picture:
As you can see, it is like the collapsible element is overlaying or a part of the next panel that should trigger the next collapsible element.
I have looked for bugs in my code multiple times and I really can't figure out why it is doing this.
So the
<div id="collapseOne" class="collapse">
is overlaying the
<a class="panel-link" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<div class="panel panel-default">
<div class="panel-body">
All of my code is in a Codepen here.
My website is in Danish :)

1) First of all, you need to fix the hierarchy of HTML-tags. Which tag should be within another?
<a class="panel-link" ...>
<div class="panel panel-default">
<div class="panel-body">
...
</a>
...
<a class="#" ...>
...
</div>
</div>
</a>
2) Bootstrap's grid system involves one more hierarchy of blocks: the container contains rows and rows contain columns. So you need to wrap columns into rows.
See demo on CodePen.

How can I go to anchor and open a Bootstrap accordion at the same time?

I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.
So I used the following:
<i class="mdi-action-info"></i>
which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.
Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working

In order to scroll to the anchor, you should wait until your collapsable div is fully shown.
JQuery helps us to easily work out with that by collapse events.
$(document).ready(function() {
$("#section-two").on('shown.bs.collapse', function() {
window.location = "#section-two";
});
});
Check out Bootstrap JS Collapse Reference on w3schools.com for a quick documentation.

You can do it manually like so:
Open group 2
JS
$('#my-link').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
});
Fiddle

In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:
<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">

Building off of Michele's answer, here is an example where you can do an animated scroll to the div:
$(document).ready(function() {
$('#accordionEvent').on('shown.bs.collapse', function() {
var position = $('#accordionEvent').offset().top;
$('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
});
});

Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. Best of all it's dynamic so you don't need to manually code a bunch of functions for each according group.
Your webpage will look something like this:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section One
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section One Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section Two
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section Two Text
</div>
</div>
</div>
</div>
<div>
Now for the code:
$(".accordian-button").click(function(e) {
that = $(this)
accordian = that.siblings('.accordian-body')
$(".accordian-body").not(accordian).collapse('hide')
accordian.collapse('toggle')
})
// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')
Here's a working fiddle:
http://jsfiddle.net/dkcb8jLq/31/
Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.

Setting up disclosure triangles for Bootstrap 3 accordion

I am pretty frustrate that the Bootstrap 3 accordion control doesn't seem to have a built-n class toggle for open/close on the heading of the accordion.
I need to have an accordion with one css class on the header when its child is open, and another for it closed. I'm close with the following code, but this doesn't cover the situation when a user closes and already opened pane without choosing a different pane -- it only works right if you keep choosing different panes.
The 3 things I need the headers to correctly show state:
when a pane is set to be opened by default (add "in" class to html of that pane)
when manually opened or closed, show right class
when closed by clicking a different pane open
I so far have
$(function() {
$('h4.panel-title').each(function() {
// check all headers to see if they have open children
var isOpen = $(this).closest('.panel').find('.panel-collapse').hasClass('in');
// and, if yes, set the class to "open"
if (isOpen) {
$(this).addClass('open');
}
});
$('h4.panel-title').on('click', function(event) {
// remove "open" class from all headers in this group
$(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
// then set the one clicked on to open
$(this).addClass('open');
});
With this html:
<div class="panel-group accordion-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
text...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
text...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
text...
</div>
</div>
</div>
</div>
It didn't fully survive being pasted into a Fiddle, but here is is: http://jsfiddle.net/smlombardi/kW33s/

Try this,
$(function() {
$('h4.panel-title').on('click', function(event) {
// remove "open" class from all headers in this group
$(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
// remove "in" class from all collapse panel
$(this).closest('.accordion-group').find('.collapse').removeClass("in");
// then set the one clicked on to open
$(this).addClass('open');
$(this).parent().next(".collapse").addClass("in");
});
});
JSFIDDLE

I found this
Bootstrap 3 accordion styling on open/closed
I realized its better to hook into the BS3 accordion events than do the click event, since the issue I had was that the pane had the IN class when clicked even if the click was going to close it.

Bootstrap accordion elements won't open

I have a number of dynamically generated bootstrap accordions nested in tabs. It's all bootstrap. I have one accordion panel defaulting to open but once i click anywhere it closes and no others will open.
I'm using the code right out off the example but filling in dynamica elements. I've checked all the other possibilities on here -making sure my data-target and/or href match the id of the accordion-body and it's all good. Someone suggested using data-target instead of just href, but that didn't help. Each accordion has a unique name and the calls to data-parent are correct. Here's the source code that generated what I copied over to jsfiddle:
<div class="tab-pane active" id="institutional">
<div class="accordion" id="accordion2">
{foreach name=loop from=$institutional item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#{$film->url_key|escape}" href="#{$film->url_key|escape}">
{$film->title()|escape} -
{$film->title_suffix()|escape}
</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
<div class="accordion-inner">
http://jsfiddle.net/dylanglockler/7qy8g/1/
----------UPDATE ------- figured it out but can't answer my own question because I don't 'have enough experience points' - didn't realize this is a game.
I figured it out.. the id of my accordion content and the related data-target and href that pointed to it, were based off of film titles which are unique, but repeated within each accordion, albeit on separate tabs. Of course this made for non-unique ids.
My fix is below, I added an _n (ie, _1) after the generated id for each of the three accordions:
<div class="accordion" id="accordion1">
{foreach name=loop from=$home item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" data-target="#{$film->url_key|escape}_1" href="#{$film->url_key|escape}_1">{$film->title()|escape} - {$film->title_suffix()|escape}</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}_1" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">

The problem seems to be having the accordion inside the tab content.
When it's removed from the tab-pane it works fine: http://jsfiddle.net/skelly/7qy8g/2/