5+ Bootstrap Accordion Menu Examples

This post contains a total of 5+ Hand-Picked Bootstrap Accordion Menu Examples with Source Code. All these Accordion Menus are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Accordion Menu Examples

1. By Altamash Akhter

Made by Altamash Akhter. Bootstrap accordion menu with minimal animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  
<style>
.ice:after{
    -webkit-transform: rotate(
90deg
);
    transform: rotate(
90deg
);
}
</style>
</head>
<body>
  <br />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example">
        <div class="card-header" id="heading-example">
          <h5 class="mb-0">
            <i class="fa fa-chevron-down pull-right ice"></i>
                Example open and close
        </h5>
        </div>
          </a>
        <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
          <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda itaque asperiores sapiente aut debitis nulla accusantium odit voluptate minima eos quia animi numquam quo atque, saepe autem tempora, reprehenderit facere?
          </div>
        </div>
      </div>
    </div>
  </div>
</div>  
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>
</html>

2. By Andreas Eracleous

Made by Andreas Eracleous. Simple Bootstrap Accordion Menu with icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Bootstrap Accordion Menu  example  with icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
body {
  color: #6a6c6f;
  background-color: #f1f3f6;
  margin-top:30px;
}

.container {
  max-width: 960px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  border-bottom: 1px solid #eee;
}

.nav li a {
  font-size: 14px;
}
.panel-default>.panel-heading a > span {
  margin-right:15px;
}
#accordionMenu {
  max-width: 300px;
}

.panel-body {
  padding: 0;
}

.panel-group .panel+.panel {
  margin-top: 0;
  border-top: 0;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
  background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\e113";
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\e114";
}
</style>
</head>
<body>
  <div class="container">
  <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <span class="glyphicon glyphicon-home" aria-hidden="true"></span>Menu 0
        </a>
      </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>Menu 1
        </a>
      </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>Menu 2
        </a>
      </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingFour">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          <span class="glyphicon glyphicon-user" aria-hidden="true"></span>Menu 3
        </a>
      </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
          </ul>
        </div>
      </div>
    </div>
    
  </div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

3. By Aleksandr

Made by Aleksandr. Accordion menu with plus icon dropdown. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
li.drop a > .glyphicon {
	position: absolute;
	right: 10px;
	top: 15px;
}
.left-drop-menu {
	display: none;
	height: 0;
}
li.drop:hover {
	cursor: poiner;
}
.left-drop-menu.open {
	display: block;
	height: auto;
}
.left-drop-menu-item {
	margin-left: -40px;
	width: 100%;
}
.left-drop-menu-item:first-child {
	margin-top: 10px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <ul class="list-group col-md-6">
      <li class="list-group-item active drop"><a href="#" style="color: #fff">text
        <i class="glyphicon glyphicon-plus drop-plus"></i></a>
        
        <ul class="left-drop-menu">
          <li class="list-group-item left-drop-menu-item active"><a href="">left-drop-menu</a></li>
          <li class="list-group-item left-drop-menu-item"><a href="">left-drop-menu</a></li>
          <li class="list-group-item left-drop-menu-item"><a href="">left-drop-menu</a></li>
        </ul>
        
      </li>
      <li class="list-group-item"><a href="#">text</a></li>
      <li class="list-group-item drop"><a href="#">text<i class="glyphicon glyphicon-plus drop-plus"></i></a>
        <ul class="left-drop-menu">
          <li class="list-group-item left-drop-menu-item active"><a href="">left-drop-menu</a></li>
          <li class="list-group-item left-drop-menu-item"><a href="">left-drop-menu</a></li>
          <li class="list-group-item left-drop-menu-item"><a href="">left-drop-menu</a></li>
        </ul>
      </li>
      <li class="list-group-item"><a href="#">text</a></li>
      <li class="list-group-item"><a href="#">text</a></li>
    </ul>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $('.drop').click(function () {
    $(this).children('.left-drop-menu').toggleClass('open');
  });
});
    </script>
</body>
</html>

4. By Kathryn Jackson

Made by Kathryn Jackson. Smooth Bootstrap accordion menu with rotating icon effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
  
<style>
body {
  background: #8eb386;
}
.container {
  margin-top: 30px;
}
@media (max-width: 767px) {
  .container {
    margin-top: 15px;
  }
}
.panel-heading h4,
.panel-heading i {
  display: inline-block;
  padding: 5px;
  margin: 0px;
}
.panel-heading i {
  margin: 4px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.panel-heading.collapsed i {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.panel-body p {
  margin-left: 10px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="panel-group" id="buffy-stuff-accordion-group">
    <div class="panel">
      <div class="panel-heading" data-toggle="collapse" data-parent="#buffy-stuff-accordion-group" href="#buffy-characters-body">
        <h4>Characters</h4>
        <i class="fa fa-chevron-circle-down fa-lg pull-right"></i>
      </div> <!-- panel-heading -->
      <div class="collapse in" id="buffy-characters-body">
        <div class="panel-body">
          <ul class="character-list">
            <li class="character-item">Buffy Summers</li>
            <li class="character-item">Willow Rosenberg</li>
            <li class="character-item">Xander Harris</li>
            <li class="character-item">Rupert Giles</li>
          </ul> <!-- character-list -->
        </div> <!-- panel-body -->
      </div> <!-- collapse -->
    </div> <!-- panel -->
    <div class="panel">
      <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#buffy-stuff-accordion-group" href="#buffy-episodes-body">
        <h4>Top Episodes</h4>
        <i class="fa fa-chevron-circle-down fa-lg pull-right"></i>
      </div> <!-- panel-heading -->
      <div class="collapse" id="buffy-episodes-body">
        <div class="panel-body">
          <ul class="episode-list">
            <li class="episode-item">Once More, With Feeling - S06E07</li>
            <li class="episode-item">The Body - S05E16</li>
            <li class="episode-item">Hush - S04E10</li>
            <li class="episode-item">Fool For Love - S05E07</li>
          </ul> <!-- episode-list -->
        </div> <!-- panel-body -->
      </div> <!-- collapse -->
    </div> <!-- panel -->
    <div class="panel">
      <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#buffy-stuff-accordion-group" href="#buffy-creator-body">
        <h4>Creator</h4>
        <i class="fa fa-chevron-circle-down fa-lg pull-right"></i>
      </div> <!-- panel-heading -->
      <div class="collapse" id="buffy-creator-body">
        <div class="panel-body">
          <p><strong>Joss Whedon</strong> is an American screenwriter, film and television director, film and television producer, comic book author, and composer. He is the founder of Mutant Enemy Productions and co-founder of Bellwether Pictures, and is best known as the creator of the television series Buffy the Vampire Slayer.</p>
          <p>Also by Joss Wheedon: Angel, Firefly, Dollhouse, Agents of S.H.I.E.L.D., Cabin in the Woods</p>
          <p>Born: June 23, 1964 in NYC, NY, USA</p>
        </div> <!-- panel-body -->
      </div> <!-- collapse -->
    </div> <!-- panel -->
    <div class="panel">
      <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#buffy-stuff-accordion-group" href="#buffy-trivia-panel">
        <h4>Trivia</h4>
        <i class="fa fa-chevron-circle-down fa-lg pull-right"></i>
      </div> <!-- panel-heading -->
      <div class="collapse" id="buffy-trivia-panel">
        <div class="panel-body">
          <ul class="trivia-list">
            <li class="trivia-item">Entertainment Weekly magazine named Buffy the number 3 character of all time, coming behind Homer Simpson and Harry Potter. (issue #1105/1106, June 4/11, 2010).</li>
            <li class="trivia-item">It cost $5000 to "dust" a vamp using computer graphics</li>
            <li class="trivia-item">Willow was recast after the pilot was shot</li>
            <li class="trivia-item">The library is stocked with all real books.</li>
          </ul> <!-- trivia-list -->
        </div> <!-- panel-body -->
      </div> <!-- collapse -->
    </div> <!-- panel -->
  </div> <!-- buffy-list-panel-group panel-group -->
</div> <!-- container -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

5. By Subroto

Made by Subroto. Accordion menu with Radio buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
.bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
  <form class="bs-example" action="">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <label for='r11' style='width: 350px;'>
              <input type='radio' id='r11' name='occupation' value='Working' required /> Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a>
            </label>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <p>text.</a></p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class=panel-title>
            <label for='r12' style='width: 350px;'>
              <input type='radio' id='r12' name='occupation' value='Not-Working' required /> Not Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"></a>
            </label>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <p>text.</a></p>
        </div>
      </div>
    </div>
  </div>
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
      <script>
$('#r11').on('click', function () {
  $(this).parent().find('a').trigger('click');
});

$('#r12').on('click', function () {
  $(this).parent().find('a').trigger('click');
});
    </script>
</body>
</html>

6. By Vubon

Made by Vubon. Basic Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        text
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        text.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        text
      </div>
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
      <script id="rendered-js" >
$('#accordion').on('shown.bs.collapse', function () {

  var panel = $(this).find('.in');

  $('html, body').animate({
    scrollTop: panel.offset().top },
  500);

});
    </script>
</body>
</html>