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
Related
I have a bootstrap accordion (ver. 5.0) inside of which are several buttons. When the user clicks on one of the buttons, I want the div inside of the accordion to change. I am currently using the display style property, alternating between show and hide as appropriate using javascript. The problem is that once the display property has been set to show, the div is shown even when the accordion is collapsed closed. Is there any way to solve this issue apart from writing a set of instructions to hide the div on collapse, as this would likely override the default accordion animation?
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#options">
<h2 class="accordion-header" id="options_heading">Options</h2>
</button>
<div id="options" class="accordion-collapse collapse" data-bs-parent="#account_info">
<button class="btn" id="password_change">Change Password</button>
</div>
<div id="p_change" class="accordion-collapse collapse" data-bs-parent="#account_info" style="display: none;">
<!-- password change form here -->
</div>
</div>
I want to switch between the div with the form and the div with the options. I'm using vanilla javascript, not jQuery.
I'm trying to implement the Bootstrap 3 data-toggle="collapse" on a menu. I have a search bar that uses data-toggle and it works well, but on the menu, although the menu appears and disappears, it doesn't animate. I can't figure out why. I believe I have followed the Bootstrap documentation.
Here is a stripped down version of my code that displays the issue: http://jsfiddle.net/7g7y4ykh/1/
Search bar toggle code:
<a class="btn-search collapsed" data-toggle="collapse" data-target=".search-collapse">
<span class="search-toggle"></span>
</a>
Search bar code:
<div id="topsearch" class="collapse search-collapse">
...
</div>
Menu toggle code:
<a class="btn-navbar" data-toggle="collapse" data-target="#topmenu">
<span class="pancakes"></span>
</a>
Menu bar code:
<div id="topmenu" class="topmenu-nav collapse">
...
</div>
If you click on the search link, a little search bar slides into view. If you click the menu link, the menu just appears - no sliding. How can I make it slide?
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.
Bootstrap normally closes other collapses when you click on one to open it.
Is there an option or hack to make it keep the collapses open unless explicitly closed without changing the look and layout of the panel-group?
Update 2020
Bootstrap 4
How do you make Twitter Bootstrap Accordion keep one group open?
Bootstrap 3
You can just remove the data-parent attribute that is normally used in the accordion markup.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
...
http://bootply.com/127843
See this demo:
http://plnkr.co/edit/OxbVII?p=preview
Idea:
Just add data-toggle="collapse" and a data-target to element, to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
2021 here:
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class.
Bootstrap docs:
https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example
They use the following collapse element:
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
This subscribes the collapse to events on #accordionExample, which is the main accordion element, via the data-parent attribute. Remove data-parent, and the collapse will no longer close when another one is expanded.
Bootstrap 4
NO NEED JAVASCRIPT
can implements many div of id #accordion{{$i}} each accordion only having 1 child that referring 1 its parent
<div class=""
id="accordion{{$i}}">
<h3 class="" data-toggle="collapse"
data-target="#collapse{{$i}}"
aria-expanded="true"
aria-controls="collapse{{$i}}" class="mb-0">
Hai Im the clickable
</h3>
<div id="collapse{{$i}}"
class="collapse"
aria-labelledby="heading{{$i}}"
data-parent="#accordion{{$i}}">
<p>Hai Im the collapsible content</p>
</div>
</div>
I Have a image slider with the twitter bootstrap collapse function in it, The slider lets you know when it slide has changed like this.
si.ev.on('rsBeforeAnimStart', function(){
$('.collapse').collapse('hide');
});
Twitter Bootstrap collapse closes on this condition but does not open again if I try to open it by clicking the button
<button type="button" class="btn noDrag" data-toggle="collapse" data-target="#collapse_1">
<h4 class="dropdown-toggle">Open Drop down</h4>
</button>
<div id="collapse_1" class="gda_block collapse out"> .. content </div>