At first I would like to say thank you to the TwitterBootsrap team for what they are producing but the documentation need much more work.
I am having the code of the site example at my site:
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Sentence 1
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Collapsible Group Item #2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Sentence2
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Collapsible Group Item #3</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Sentence3
</div>
</div>
</div>
</div>
The problem is that each row of the accordion opens and closes only once and then the accordion becomes useless. What am I doing wrong?
I had this same problem. Updated jQuery to latest version (1.9.1) fixed it.
Related
I am aware there are similar posts to this one, but I could not find an answer.
I have a bit of a custom layout, but I want to try and add the accordion effect however I cannot seem to figure out why, but for some reason everything works perfectly except that they do not close automatically once another one is clicked.
Here is my Accordion code:
<aside class="col-lg-4">
<div class="list-group">
<ul class="product-sorting">
<div id="accordion" role="tablist" aria-multiselectable="true" class="panel panel-group">
<li>All Products</li>
<li>
<a data-group="IQF" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">IQF Fruits (Individually Quick Frozen)
</a>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Fruit-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Fruit Juice Concentrate
</a>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Puree-pulp" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Fruit Puree/ Pulp
</a>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Puree-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
Fruit Puree Concentrate
</a>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="NFC" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
NFC
</a>
<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Organic" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
Organic
</a>
<div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Dried" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">Dried Fruit/ Sweetened Dried Fruit
</a>
<div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
</div>
</ul>
</div>
</aside>
This is what is looks like:
The text "Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives." is just dummy text it's the same for all the panels so do not let that confuse you.
Use <div class="accordion-group">
and assign data-parent="#parentdivid" to each of the accordion.
Example Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<h3>ACCORDION COLLAPSE</h3>
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>
I have 3 divs
One is a jumbotron.Second is another div which has accordions. Third is a fixed footer.I want this to get the height according to screen height.Footer heightis 75px.2 accordions height is 100px.The image is a PNG.
<--CODE-->
<body>
//This is the First Div which has the IMAGE
<div class="container push-spaces">
<div class="row">
<div class="col-xs-12">
<img>
</div>
</div>
</div>
</div>
<--2ND DIV PANELS Accordions-->
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseTwo"
href="#collapseTwo" class="collapsed">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</div>
<--FOOTER-->
<div class="navbar navbar-default navbar-fixed-bottom visible-xs ">
<div class="container text-center">
<p class="navbar-btn btn btn-success text-center">BLALALLALAL</p>
</div>
</div>
</body>
You could use CSS3 calc, depending on your browser support.
height: calc(100vh - 175px);
I have created a portfolio page where I'm trying to use bootstrap's collapse function. It works fine, but when one of divs is open and you click on another, the first one stays open and so on! I can leave it like that but it just looks bad. :)
Here is my code:
<div class="col-md-4">
<a data-toggle="collapse" data-target="#project-1">
<figure><img src="images/work/2.jpg" alt="" class="img-responsive"></figure>
</a>
And the collapse div:
<div class="row">
<div class="project-info collapse animated fadeInRightBig" id="project-1">
<div class="col-md-6">
<figure><img src="images/work/2.jpg" alt="" class="img-responsive"></figure>
</div>
<div class="col-md-6">
<button class="btn btn-primary" data-toggle="collapse" data-target="#project-1">Close</button>
<h3>This is My Project Description</h3>
</div>
</div>
There are a few thumbnails in orders like project-1, project-2, project-3.
Assuming you're using Bootstrap 3, you just need to make sure all collapses are inside the same .panel-group.
See the example in the Bootstrap 3 docs.
Like this:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
</div>
JSFiddle
http://jsfiddle.net/dpGsZ/2/
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
</div>
it's just a copy/pasted accordion from the Bootstrap docs.
According to http://getbootstrap.com/javascript/ I shouldn't need to do anything else to get that accordion to work. But it doesn't.
What am I doing wrong?
Added Jquery 1.9.1, Bootstrap 3 CSS and Bootstrap 3 JS. Now your accordion works. Check it out at jsFiddle
Next time, do read the documentation clearly and carefully. For example for BS3, on page http://getbootstrap.com/getting-started/, thereis a subsection called what's included and that has something written in a red-box.
Update: jQuery is required for bootstrap to work. Please check the starter template
You need to include the jQuery library using either the Google CDN (script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">) or downloading it yourself from the jQuery website.
FYI, in Bootstrap 3.0.0 final the accordion classes have been changed to "panel", "panel-group", "panel-heading", and "panel-toggle".
http://jsfiddle.net/dpGsZ/3/
<div>
<div class="panel-group" id="accordion2">
<div class="panel">
<div class="panel-heading">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="panel-body collapse in">
<div class="panel-inner">
This is collapsible one
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="panel-body collapse">
<div class="panel-inner">
This is collapsible two
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="panel-body collapse">
<div class="panel-inner">
This is collapsible three
</div>
</div>
</div>
</div>
I am using collapse plugin provided by bootstrap
which is a jquery simple plugin
However it collapse by default, how to modify so that the collapse item is hidden by default, only when i press the header, then the item collapse and show? Thank you
The document of the plugin, just few line so it only takes one minute
$(document).ready( function () {
$(".collapse").collapse()({
toggle: false,
show: false
});
} );
This is the html:
<div class="accordion-group">
<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">
Collapsible #1
</div>
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
content1
</div>
<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">
Collapsible #2
</div>
<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
content2
</div>
For Bootstrap 3, some things have changed. The following code accomplishes your desired functionality in Bootstrap 3
If you want the panel body to show by default:
<div id="collapseOne" class="panel-collapse collapse in">
If you want the panel body to hide by default:
<div id="collapseOne" class="panel-collapse collapse">
Here is an example:
<div class="bs-example">
<div class="panel-group" id="accordion">
<!- Repeat For Next Panel------->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
</div>
</div>
</div>
<!- Repeat For Next Panel---(but change <div id="collapseTwo")--->
</div>
</div>
<div class="accordion-group collapse">
<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">
Collapsible #1
</div>
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
content1
</div>
<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">
Collapsible #2
</div>
<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
content2
</div>
</div>