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>
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 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
Ok so i have a modal in bootstrap that has the class of show, to have it display on page load. So it has a ender button at the bottom but couldnt get it to close on click
So I now have script that closes if clicks any where on the box but really it only on that button
JS
<script>
$('.modal').click(function() {
$(this).removeClass('show');
$(this).addClass('hide');
});
</script>
Modal box classes
<div class="modal show"></div>
Button
<button type="button" class="btn btn-primary center-block click" style="font-size: 20px;" onClick='changeClass'">ENTER</button>
Any help would be great!
This doesn't work that way.
You only have to $('.modal .close').modal("hide");
.close being the class for your close button.
Or you can add attribute data-dismiss="modal" to close button.
Ref: http://getbootstrap.com/javascript/#modals-methods
If you are using bootstrap you can do this to close and show a modal:
$('.modal').modal('toggle');
Check out the documentation here.
Also note that bootstrap has an out of the box close button (which you need to include inside your modal) to handle this behavior:
<button type="button" class="close" data-dismiss="modal">x</button>
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>