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();
}
}
})();

Show and hide one div add a time on button click using css issue

I have used bootstrap feature to make a functionality of showing/hiding one div at a time on button click like this
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
<button class="collapsed" data-toggle="collapse" href="#collapseExample">
<span class="if-collapsed">Add more div</span>
<span class="if-not-collapsed">Remove more div</span>
</button>
<div class="collapse" id="collapseExample">
//some content
<button class="collapsed" data-toggle="collapse" href="#collapseExample2">
<span class="if-collapsed">Add 2nd last div</span>
<span class="if-not-collapsed">Remove 2nd last div</span>
</button>
</div>
<div class="collapse" id="collapseExample2">
//Similar code as above
</div>
This allows me to put buttons inside collapsed div which I can click and add more div once the initial collapsed div is open. This allows me to add one div at a time.
If a user clicks add 2nd last div button and then 3rd last div button and so on.. and then goes and clicks remove 2nd last div button all other divs under it like 3rd last div and fourth last div remain displayed. Is there a way through CSS or Javascript that I can hide all successive div once the parent div is closed.

You might want some multiple selectors rule like
[data-toggle="collapse"].collapsed .if-not-collapsed,
[data-toggle="collapse"]:not(.collapsed) .if-collapsed,
[data-toggle="collapse"].collapsed~[data-toggle="collapse"]
{
display: none;
}
~ is the succeeding siblings selector. You can list multiple selectors by comma.
Be more specific like
[data-toggle="collapse"].collapsed~[data-toggle="collapse"]>.some-child
if your do not want do make the entire div elements invisible.

Bootstrap accordion - hold open/close after navigation away?

I just installed an accordion / collapsible element and on the page, it is functioning correctly. However, when navigating away and back, the previous 'close' action of the collapse is not retained. It's still open when I return.
Is there a way to retain the previous action of the collapse?
<div class="row">
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#demo">MORE</button>
<div id="demo" class="collapse in">
<div class="row">
Foo bar - Foo bar
</div>
</div>
</div>

you can simply check the documentation right here: Bootstrap collapse how to collapse or not collapse your accordion.
$('#demo').collapse({
toggle: false //you can simple untoggle your collapse on page load.
})
There is many more you can do too like:
.collapse('toggle') //Toggles a collapsible element to shown or hidden.
.collapse('show') //Shows a collapsible element.
.collapse('hide') //Hides a collapsible element.
Update
to save the current state of the dropdown, I will suggest you use Jquery.cookies to do so. This is a similar question to yours and I named all the steps there

Hiding button after collapse is toggled in bootstrap

Given the following code from the bootstrap website for the collapse functionality:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?

I used this to hide the button after it was clicked:
HTML (just added a class "hide-me"):
<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>
CSS:
.hide-me[aria-expanded="true"] {display: none;}

This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:
<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse hook">
<div class="well">
...
</div>
</div>
Heres the fiddle:
http://jsfiddle.net/hptrpaxh/1/

Add this:
$('.btn').toggle();
I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.

Sorry didn't see you were trying to do it without extra js.
Here's an easy CSS trick. You can obviously modify it as well
give the button a class like hidden-button
Then use this CSS
.hidden-button {
position:relative;
z-index:0;
}
.well {
position:relative;
margin-top:-33px;
z-index:10000;
}
Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/

This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.
Notice that I've hidden the accordion item borders with b-0.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion m-4" id="accordionArea">
<div class="accordion-item border-0">
<div class="accordion-collapse collapse show">
<button class="btn btn-primary" role="button"
data-bs-toggle="collapse" data-bs-target="#content"
aria-expanded="false" aria-controls="content">Toggle button & content
</button>
</div>
</div>
<div class="accordion-item border-0">
<div id="content" class="accordion-collapse collapse"
data-bs-parent="#accordionArea">
<div>Some content.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.
Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:
.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
display: none;
}
This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.

Changing Bootstrap column class on click, change it back when other element is clicked

This seems quite tricky to me. I want to change a bootstrap column class from "col-md-2" to "col-md-3" when class "panel-titel" within the div is clicked. When the user clicks on another "panel-titel" I want that one's containing "col-md-2" to change to "col-md-3" and the first class change of the other div to be reverted. Is this even possible? Thanks.
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
15.3.2014
</a>
</h4>
</div>
<div id="timeline1" class="panel-collapse collapse">
<div class="panel-body">
<a href="#" class="thumbnail">
<img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11">
</a>
</div>
</div>
</div>
</div>

Here's a strategy that might help: listen to the click event on .panel-title, and change the parent class to md-col-3 when it is clicked on, and also revert the classes of all siblings of this parent to md-col-2. Here's the code:
$('.panel-title').click(function() {
$(this)
// Find parent with the class that starts with "col-md"
// Change class to "col-md-3"
.closest('[class^="col-md"]')
.removeClass('col-md-2')
.addClass('col-md-3')
// Find siblings of parent with similar class criteria
// - if all siblings are the same, you can use ".siblings()"
// Change class to "col-md-2"
.siblings('[class^="col-md"]')
.removeClass('col-md-3')
.addClass('col-md-2');
});
Note that if all the siblings of the parents are the same, you can make do without the .siblings('[class^="col-md"]') selector, and use .siblings() instead.
A more simple way to view the code above, without comments. The indentations are useful when chaining in jQuery to keep track of the objects that are currently being manipulated:
$('.panel-title').click(function() {
$(this)
.closest('[class^="col-md"]')
.removeClass('col-md-2').addClass('col-md-3')
.siblings('[class^="col-md"]')
.removeClass('col-md-3').addClass('col-md-2');
});
Here is a proof-of-concept fiddle: http://jsfiddle.net/teddyrised/zwpCF/
[Update] Even better: if you want to save a few bytes, you can use .toggleClass() instead:
$('.panel-title').click(function() {
$(this)
.closest('[class^="col-md"]')
.toggleClass('col-md-2 col-md-3')
.siblings('[class^="col-md"]')
.removeClass('col-md-3')
.addClass('col-md-2');
});
See fiddle here: http://jsfiddle.net/teddyrised/zwpCF/1/

You can try below code
$('.target1').click(function(){
$(".col-md-3").addClass("col-md-2");
$(".col-md-3").removeClass("col-md-3");
});
$('.target2').click(function(){
$(".col-md-2").addClass("col-md-3");
$(".col-md-2").removeClass("col-md-2");
});