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
Related
I have an accordion with three "panels" First one is expanded on inital load.
The first panel have an input field. When the user has updated this field I would like to automatically expand the next panel and collapse the current panel.
The accordion it self works as expected ( I have jquery avaiable on the page).
I have searched and only found examples of expanding/collapsing by clicking on a link/button.
How do I do that?
This is my code:
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
<div class="bs-example">
<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"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</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"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>
you could find a working solution in this snippet. The idea is to manually manipulate the bootstrap collapse elements.
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
$(document).on("change", "#textfield", function(){
$("#collapseOne").collapse('hide');
$("#collapseTwo").collapse('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bs-example">
<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"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</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"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>
I have a bootstrap modal windows with an accordion(panel-group) inside an angular ng-repeat, see code below. After the first time I open the modal everything works fine, but if I close the modal, next time the accordions stop working. Please help...
Thanks.
<div class="modal-body">
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="p in persons">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{p.Id}}">
<strong>Name:</strong> {{p.Name}}
<strong>Birthdate:</strong> {{p.BirthDate}}
<strong>Sex:</strong> {{p.Sex}}
</a>
</h4>
</div>
<div id="{{p.Id}}" class="panel-collapse collapse" ng-repeat="o in p.Orders">
<div class="panel-body">
<div class="col-sm-8">
<strong>Date:</strong> {{o.Date | date:'MM/dd/yyyy'}}<br />
<strong>Description:</strong> {{o.Description}}
</div>
</div>
</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);
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>