Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Introduction
Please read
Bootstrap Introduction if you are new to Bootstrap.
Accordion is the Bootstrap's predefined Style with JavaScript that will allows user to Show or Hide the particular content on his wish.
Objective
The main objective of this article to learn different types of Accordions or Collapsible contents using Twitter Bootstrap.
Using Bootstrap code
Lets start by creating a simple Collapsible form using the below example,
<div class="well" id="accordion">
<div>
<h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseDNF">What is DotNetFunda?</a></h4>
</div>
<div id="collapseDNF" class="collapse in"> <!-- By default it shows the content below. remove 'in' to hide the content by default -->
DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. It helps beginners to become intermediate level professionals and intermediates to become an expert.
</div>
</div>In the above code, we are keeping our entire content in a
Well. Run this snip in your browser to see the following result
In the above output, Content toggles (Show/Hide) on clicking the title "
What is DotNetFunda?".
Using Panels:
As we kept in the well in above example, we can also Keep the accordion in the Panels like below,
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseDNF">
What is DotNetFunda?
</a>
</h4>
</div>
<div id="collapseDNF" class="panel-collapse collapse in">
<div class="panel-body">
DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. It helps beginners to become intermediate level professionals and intermediates to become an expert.
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseITF">
What is ITFunda?
</a>
</h4>
</div>
<div id="collapseITF" class="panel-collapse collapse">
<div class="panel-body">
ITFunda.Com is an e-commerce website that furnishes a platform to the interested buyer and seller to interact and transact for the software or software related services. It typically hosts study materials, software products / services for buying/selling.
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseKF">
What is KidsFunda?
</a>
</h4>
</div>
<div id="collapseKF" class="panel-collapse collapse">
<div class="panel-body">
KidsFunda is the website designed to give the learning fundamentals for kids.
</div>
</div>
</div>
</div>In the above code, we have taken three panels and grouped them by using
panel-group class of Bootstrap. Run and see the above code in your browser which looks like something as shown below,
Using Data Attributes:
We can also use Data attributes such as buttons to create collapsible content. Take a look at the below code snippet that clears on this,
<input type="button" class="btn btn-warning" data-toggle="collapse" data-target="#toggleDNF" value="DotNetFunda">
<hr />
<div id="toggleDNF" class="collapse in">
<p>DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. It helps beginners to become intermediate level professionals and intermediates to become an expert.</p>
</div>The above code will gives the following output in your browser,
Here, we can change the status of the content using Button.
Using JavaScript:
Now, if we want to work out the same function using JavaScript, please follow below approach
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
$("#toggleDNF").collapse('toggle');
});
});
</script>and your HTML as,
<input type="button" class="btn btn-primary" value="Toggle Content" />
<div id="toggleDNF" class="collapse in" style="border:1px solid orange;padding:5px;margin-top:5px;">
DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. It helps beginners to become intermediate level professionals and intermediates to become an expert.
</div>Run this combination in your browser to experience the same result as we got with Data attributes,
toggle:
By default, the toggle function is set to true. But if we need to disable the toggle function, Just make it to false like below,
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
$("#toggleDNF").collapse({ toggle: false });
});
});
</script>This will disables the toggling functionality in your browser for the particular
id element.
show:
This parameter will shows your Collapsing content permanently. Just replace show function instead of toggle in the above script which looks as,
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
$("#toggleDNF").collapse('show');
});
});
</script>hide:
Similarly there is a hide parameter which Hides your content in the browser. Replace show with hide in the above JavaScript i.e,
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
$("#toggleDNF").collapse('hide');
});
});
</script>Showing Alerts on Toggling Accordion(Events):We can also show the JavaScript Alerts on Toggling Content. Observe the below Script in which we are setting an Alert message on Hiding the Content.
<script type="text/javascript">
$(document).ready(function () {
$("#toggleDNF").on('hidden.bs.collapse', function () {
alert("Accordion element has been completely closed.");
});
});
</script>and HTML as,
<input type="button" class="btn btn-danger" data-toggle="collapse" data-target="#toggleDNF" value="Toggle Button" />
<div id="toggleDNF" class="collapse in" style="border:1px solid orange;padding:5px;margin-top:5px;">
DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. It helps beginners to become intermediate level professionals and intermediates to become an expert.
</div>Now Run this combination of code in your browser and try to close/hide the content by clicking button. You will see the following Alert message then
And if you want to show the alert message on Showing the content, Just modify the above JavaScript like below,
<script type="text/javascript">
$(document).ready(function () {
$("#toggleDNF").on('shown.bs.collapse', function () {
alert("Accordion element has been opened.");
});
});
</script>'
shown.bs.collapse' will sets any action on Showing the content as in the below output
Conclusion
In this article, we have seen different types of Collapsible content in Bootstrap. Hope you understand. If you have any doubts in this topic, please ask in the comments section below.
Thanks for reading.
Regards,
Krishna.