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>
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 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 am working on one website where i need navbar or instead i can use anchor button for displaying my content,here i have problem with displaying content on load.first time as i click on any button all expanded item get collapsed and than on second click it will follow instruction as i given in code java script.
here is what i did:
$('#button-1').click(function(e) {
$('#collapseOne').collapse('show');
$('#collapseTwo').collapse('show')
$('#collapseThree').collapse('show');
$('#collapsefour').collapse('show')
});
$('#button-2').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show')
$('#collapseThree').collapse('show');
$('#collapsefour').collapse('show')
});
$('#button-3').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('hide')
$('#collapseThree').collapse('show');
$('#collapsefour').collapse('show')
});
$('#button-4').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('hide')
$('#collapseThree').collapse('hide');
$('#collapsefour').collapse('show')
});
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
button 1
button 2
button 3
button 4
<div class="panel-group" id="accordion">
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a></h4></div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
test test test
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"></a></h4></div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
test-1 test-1 test-1
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"></a></h4></div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
test-2 test-2 test-2 test-2
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsefour"></a></h4></div>
<div id="collapsefour" class="panel-collapse collapse in">
<div class="panel-body">
test-3 test-3 test-3
</div>
</div>
example :FIDDLE
You can do following way easily using show() and hide()
$('#button-1').click(function(e) {
$('#collapseOne').show("normal");
$('#collapseTwo').show("normal");
$('#collapseThree').show("normal");
$('#collapsefour').show("normal");
});
$('#button-2').click(function(e) {
$('#collapseOne').hide("normal");
$('#collapseTwo').show("normal");
$('#collapseThree').show("normal");
$('#collapsefour').show("normal");
});
$('#button-3').click(function(e) {
$('#collapseOne').hide("normal");
$('#collapseTwo').hide("normal");
$('#collapseThree').show("normal");
$('#collapsefour').show("normal");
});
$('#button-4').click(function(e) {
$('#collapseOne').hide("normal");
$('#collapseTwo').hide("normal");
$('#collapseThree').hide("normal");
$('#collapsefour').show("normal");
});
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
button 1
button 2
button 3
button 4
<div class="panel-group" id="accordion">
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a></h4></div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
test test test
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"></a></h4></div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
test-1 test-1 test-1
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"></a></h4></div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
test-2 test-2 test-2 test-2
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsefour"></a></h4></div>
<div id="collapsefour" class="panel-collapse collapse in">
<div class="panel-body">
test-3 test-3 test-3
</div>
</div>
Updated Fiddle
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>
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.