How to Create Bootstrap Accordion Menu - Example

On 10/28/2014

Hi, in this tutorial we'll see how to create accordion menu in bootstrap. Accordion Menu is one of the important components of Twitter Bootstrap 3 Framework, and is a stacked list of items such as windows, buttons, labels, thumbnails etc which can be expanded and collapsed though only one accordion window will be visible at a time.

To add a collapsible bootstrap accordion menu, we'll stack two or more panels one after another inside a panel group. Only the panel heading will be visible and the body will be collapsed and if we click on the heading of a particular panel then the body section will be expanded for the particular panel and the rest of the panels will be collapsed to show only the heading links.

Recommended Read: 10 Amazing CSS Drop Cap Effects you can Copy Paste

Recommended Read: How to Create Round Social Media icon style buttons using CSS

Recommended Read: Insert JSON Data into MySQL Database in PHP

bootstrap-accordion-menu

Bootstrap Accordion Data Attributes

Two data attributes data-toggle = "collapse" and data-parent = "#accordion" should be used to make the bootstrap accordion menu collapsible.

Bootstrap Accordion Menu Example

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter Bootstrap 3 Accordion Menu Example</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    .panel-title > a:hover,
    .panel-title > a:active,
    .panel-title > a:focus {
        text-decoration: none;
        outline: none;
    }
    </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
    <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#one">CSS Tutorials</a>
            </h4>
        </div>
        <div id="one" class="panel-collapse collapse in">
        <div class="panel-body">
            <ol>
                <li><a href="http://www.kodingmadesimple.com/2014/02/how-to-create-round-social-media-icon.html">How to Create Round Social Media icon style buttons using CSS</a></li>
                <li><a href="http://www.kodingmadesimple.com/2014/05/create-css-buttons-step-by-step-tutorial.html">Create CSS Buttons - A Step-by-Step Tutorial</a></li>
                <li><a href="http://www.kodingmadesimple.com/2014/03/how-to-add-photo-frame-effect-to-images.html">How to add Photo Frame Effect to Images using pure CSS</a></li>
                <li><a href="http://www.kodingmadesimple.com/2014/03/10-amazing-css-drop-cap-effects.html">10 Amazing CSS Drop Cap Effects you can Copy Paste</li></a>
                <li><a href="http://www.kodingmadesimple.com/2014/05/create-horizontal-menu-bar-with-html-and-css.html">Create a stylish Horizontal Menu Bar with HTML and CSS</a></li>
            </ol>
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#two">Bootstrap Tutorials</a>
            </h4>
        </div>
        <div id="two" class="panel-collapse collapse">
        <div class="panel-body">
            <ol>
                <li><a href="http://www.kodingmadesimple.com/2014/04/bootstrap-custom-responsive-navbar-tutorial.html">Create RESPONSIVE Navigation Menu Bar with Twitter Bootstrap3</a></li>
                <li><a href="http://www.kodingmadesimple.com/2014/06/integrate-twitter-bootstrap3-with-codeigniter-framework.html">How to integrate Twitter Bootstrap 3 with PHP CodeIgniter Framework</a></li>
                <li><a href="http://www.kodingmadesimple.com/2014/07/add-and-customize-twitter-bootstrap3-breadcrumbs.html">How to Add and Customize Twitter Bootstrap3 Breadcrumbs</a></li>
            </ol>
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#three">PHP Tutorials</a>
            </h4>
        </div>
        <div id="three" class="panel-collapse collapse">
        <div class="panel-body">
            <ol>
                <li><a href="http://www.kodingmadesimple.com/2014/08/how-to-get-status-code-from-http-response-headers-in-php.html">How to get the Status Code from HTTP Response Headers in PHP</a></li>
                <li><a href="http://www.kodingmadesimple.com/2014/04/php-json-decode-function-to-parse-json-object.html">Use PHP json_decode function to parse json object and insert into MySQL Database</a></li>
                <li><a href="http://www.kodingmadesimple.com/2014/04/use-php-preg-match-function-for-form-validation.html">How to use PHP PREG MATCH function to validate Form Input</a></li>
            </ol>
        </div>
        </div>
    </div>
    </div>
</div>
</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Hope you find this Twitter Bootstrap Accordion Menu Example Tutorial useful. Please don't forget to share it in your circle.

1 comment:

  1. Where do I find the three includes referenced in this script? One CSS and two java Scripts.

    ReplyDelete

Contact Form

Name

Email *

Message *