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>
Related
I have a accordion which is working absolutely fine but what I need is to open only one tab at a time, means when one tab is opened then another tab should be closed.
Currently you can see that we can open all the tabs by clicking on tab links.
Code here
<div id="accordion" class="checkout">
<div class="panel checkout-step">
<div class="head" role="tab" id="headingOne">
<img src="{{ asset('bundles/leaderboxfrontfront/img/1.png') }}" alt="">
<div id="bubble">
<h1><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" > MON PROJET</a></h1>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="form-zone">
<div class="content">
Some content
</div>
</div>
</div>
</div>
<div class="panel checkout-step">
<div class="head" role="tab" id="headingTwo">
<img src="{{ asset('bundles/leaderboxfrontfront/img/3.png') }}" alt="">
<div id="bubble">
<h1><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" > je choisis mon centre</a></h1>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="form-zone">
<div class="content">
Some content
</div>
</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
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.
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>