Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Bootstrap Collapsible list group
To create a collapsible list group in Bootstrap, combine the panel-collapse property with the list-group property. This creates an expandable section containing a list of items that can be toggled with a click.
Basic Structure
A collapsible list group consists of three main components:
- Panel container: Wraps the entire collapsible section
- Panel header: Contains the clickable trigger element
- Collapsible content: Houses the list group items
Example
The following example demonstrates a collapsible list group with programming languages. Click the "Info" header to expand or collapse the list:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Collapsible List Group</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Questions/ Answers</h2>
<p>Click below to learn about the technologies for which we provide Interview Questions.</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#test">Info</a>
</h4>
</div>
<div id="test" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Java</li>
<li class="list-group-item">PHP</li>
<li class="list-group-item">C++</li>
<li class="list-group-item">HTML5</li>
<li class="list-group-item">jQuery</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Key Classes and Attributes
| Class/Attribute | Purpose |
|---|---|
panel-group |
Container for multiple collapsible panels |
panel-collapse collapse |
Makes the content collapsible (hidden by default) |
data-toggle="collapse" |
Enables collapse functionality on the trigger element |
list-group |
Creates a styled list container |
list-group-item |
Styles individual list items |
How It Works
When a user clicks the trigger link (with data-toggle="collapse"), Bootstrap's JavaScript automatically toggles the visibility of the target element. The href="#test" attribute links to the collapsible content with id="test".
Customization Options
You can enhance the collapsible list group by:
- Adding
collapse inclass to show content by default - Using different panel styles:
panel-primary,panel-success,panel-info - Adding badges or icons to list items using
<span class="badge">
Conclusion
Bootstrap's collapsible list groups provide an elegant way to organize content in expandable sections. They're perfect for FAQs, navigation menus, or any content that benefits from progressive disclosure.
4K+ Views
