Bootstrap allows us to expand and collapse elements without using the accordion markup and JavaScript code.
Add data-toggle="collapse" to the controller element such as a button or an anchor along with a data-target for buttons or href for anchors to automatically assign control of a collapsible element.
The data-target or href attribute accepts a CSS selector to apply the collapse to a specific element.
Add the class "collapse" to the collapsible element. If you'd like it to default open, add the additional class "in".
<!-- www .j a va 2 s . c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
p{
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>
We may expand and collapse an individual element manually via JavaScript, call the collapse() method with the "id" or "class" selector of the collapsible element in your JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j ava 2 s .c om-->
$(".btn").click(function(){
$("#toggleDemo").collapse('toggle');
});
});
</script>
<style type="text/css">
p{
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="toggleDemo" class="collapse in"><p>
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>
The following options can be used with collapse.
Name | Type | Default Value | Description |
---|---|---|---|
parent | selector | false | Set collapsible parent. |
toggle | boolean | true | Toggles the collapsible element on invocation. |
<!-- w ww .j a v a 2 s . c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggle-false").click(function(){
$("#myCollapsible").collapse({
toggle: false
});
});
$(".show-btn").click(function(){
$("#myCollapsible").collapse('show');
});
$(".hide-btn").click(function(){
$("#myCollapsible").collapse('hide');
});
$(".toggle-btn").click(function(){
$("#myCollapsible").collapse('toggle');
});
});
</script>
<style type="text/css">
p {
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary toggle-false" value="Toggle False">
<input type="button" class="btn btn-primary show-btn" value="Show Button">
<input type="button" class="btn btn-primary hide-btn" value="Hide Button">
<input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="myCollapsible">
<p>Click on the buttons to see how it works.</p>
</div>
</div>
</body>
</html>
We can use the following events with collapse.
Event | Description |
---|---|
show.bs.collapse | fires immediately when the show instance method is called. |
shown.bs.collapse | fired when a collapse element has been made visible to the user after animation. |
hide.bs.collapse | fired immediately when the hide method has been called. |
hidden.bs.collapse | fired when a collapse element has been hidden from the user after animation. |
The following example displays a log message when sliding transition of a collapsible element has been fully completed.
<!-- ww w. j a va2 s . c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myCollapsible').on('hidden.bs.collapse', function(){
console.log('Collapsible element has been completely closed.');
});
});
</script>
<style type="text/css">
p {
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="myCollapsible" class="collapse in"><p>This is a simple example of hidden event. </p></div>
</div>
</body>
</html>