How to make Accordion Menu
Hello everyone, this is our new post to let you know how to create a simple accordion for your website.
Accordion
menus or navigation are manually used on the website to manage large content
and navigation lists. The following example will show you how to build a simple
accordion by using Bootstrap collapsible components.
The following can be made by using only bootstrap css and javascript. Click to see example.
<!--
Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<div
class="container">
<div class="row pad-top">
<div
class="col-md-12">
<div class="panel
panel-primary">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
<i
class="fa fa-plus"></i>Lorem ipsum dolor sit amet
</a>
</h4>
</div>
<div
id="collapseOne" class="panel-collapse collapse in">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-success">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
<i
class="fa fa-plus"></i>Aenean eget ligula id nulla
</a>
</h4>
</div>
<div
id="collapseTwo" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-danger">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
<i
class="fa fa-plus"></i>Duis lobortis purus auctor
</a>
</h4>
</div>
<div
id="collapseThree" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-default">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a data-toggle="collapse"
data-parent="#accordion" href="#collapsefour">
<i
class="fa fa-plus"></i>Nulla eget condimentum mauris
</a>
</h4>
</div>
<div
id="collapsefour" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros rhoncus,
sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-warning">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapsefive">
<i
class="fa fa-plus"></i>Placerat vel a nulla
</a>
</h4>
</div>
<div
id="collapsefive" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
</div>
</div>
</div> <div class="row pad-top">
<div
class="col-md-12">
<div
class="panel-group" id="accordion">
<div class="panel
panel-primary">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
<i
class="fa fa-plus"></i>Lorem ipsum dolor sit amet
</a>
</h4>
</div>
<div
id="collapseOne" class="panel-collapse collapse in">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-success">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
<i class="fa
fa-plus"></i>Aenean eget ligula id nulla
</a>
</h4>
</div>
<div
id="collapseTwo" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-danger">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<i
class="fa fa-plus"></i>Duis lobortis purus auctor
</a>
</h4>
</div>
<div
id="collapseThree" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-default">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapsefour">
<i
class="fa fa-plus"></i>Nulla eget condimentum mauris
</a>
</h4>
</div>
<div
id="collapsefour" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros rhoncus, sed
tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
<div class="panel
panel-warning">
<div
class="panel-heading">
<h4
class="panel-title panel-title-adjust">
<a
data-toggle="collapse" data-parent="#accordion"
href="#collapsefive">
<i
class="fa fa-plus"></i>Placerat vel a nulla
</a>
</h4>
</div>
<div
id="collapsefive" class="panel-collapse collapse">
<div
class="panel-body">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Vivamus sagittis egestas mauris ut
vehicula. Cras viverra ac orci ac aliquam.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare placerat
vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
Nulla eget condimentum mauris, eget
tincidunt est. Quisque in luctus ligula.
Aenean eget ligula id nulla ornare
placerat vel a nulla.
Duis lobortis purus auctor eros
rhoncus, sed tempor est molestie.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
!-----------------------------------------------Tech Hunters-----------------------------------------------------!
Regards
Team
0 comments