Bootstrap Accordion

0 4642

Bootstrap Accordion used for large amount of content and navigation lists. This is very interesting, if you click on vertical navigation then there directly show the content under particular navigation.

You can modify the background color, font, text as per your need. Bootstrap Accordion, mainly use for FAQ's web page or any question or answer purposes. For show we add dummy text, you can change and increase the navigation list.

For more details you can use below example code and output screenshot also for properly understand.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h1> Bootstrap Accordion </h1>

<div id="accordion" class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">

<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 1. Lorem ipsum dolor ? </a>
</h4>

</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. </p>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">

<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 2. Lorem ipsum dolor ? </a>
</h4>

</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. </p>
</div>
</div>
</div>

<div class="panel panel-info">
<div class="panel-heading">

<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3″> 3. Lorem ipsum dolor ? </a>
</h4>

</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. </p>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">

<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4"> 4. Lorem ipsum dolor ? </a>
</h4>

</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. </p>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">

<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5"> 5. Lorem ipsum dolor ? </a>
</h4>

</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis condimentum odio. In hac habitasse platea dictumst. Cras rhoncus in metus a maximus. </p>
</div>
</div>
</div>
</div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</body>

</html>