Bootstrap Accordion

Accordion menus or navigation are widely used on the website to manage large content and navigation lists. The following example will show you how to build a simple accordion widget using Twitter Bootstrap collapsible components:
Example

<div id="accordion" class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What is HTML 5</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://tutorial.shiksha360.com" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://tutorial.shiksha360.com" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://tutorial.shiksha360.com" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>

The output of the above example will look something like this:

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.

Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.

CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.

Expanding and Collapsing Elements via Data Attributes
Bootstrap enables you to expanding and collapsing any specific element without using the accordion markup and writing any JavaScript code.

Add data-toggle=”collapse” to the controller element (such as a button or an anchor by clicking on which you want to collapse another element) along with a data-target (for buttons) or href (for anchors) to automatically assign control of a collapsible element.

The data-target or href attribute accepts a CSS selector to apply the collapse to a specific element. Be sure to add the class “collapse” to the collapsible element. If you’d like it to default open, add the additional class “in”.
Example

<input type="button" class="btn" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
<div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>

Expanding and Collapsing Elements via JavaScript
You may also expand and collapse an individual element manually via JavaScript — just call the collapse() Bootstrap method with the “id” or “class” selector of the collapsible element in your JavaScript code.
Example

<input type="button" class="btn" value="Toggle Button">
<div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. Click on the <b>Simple Collapsible</b> button to see the effect.</p></div>

Options
There are certain options which may be passed to collapse() Bootstrap method to customize the functionality of a collapsible element.

Name Type Default Value Description
parent selector false All other collapsible elements under the specified parent will be closed while this collapsible item is shown on invocation.
toggle boolean true Toggles the collapsible element on invocation.

You can also set these options using the data attributes on accordion — just append the option name to data-, like data-parent=”#myAccordion”, data-toggle=”false” etc. as demonstrated in the basic implementation.
Methods
These are the standard bootstrap’s collapse methods:
.collapse(options)
This method activates your content as a collapsible element.
Example

 <script type="text/javascript">
    $(document).ready(function(){
        $(".btn").click(function(){
            $("#myCollapsible").collapse({
                toggle: false
            });
        });
    });
    </script>

.collapse(‘toggle’)
This method toggles (show or hide) a collapsible element.
Example

<script type="text/javascript">
    $(document).ready(function(){
        $(".toggle-btn").click(function(){
            $("#myCollapsible").collapse('toggle');
        });
    });
    </script>

.collapse(‘show’)
This method shows a collapsible element.
Example

   <script type="text/javascript">
    $(document).ready(function(){
        $(".show-btn").click(function(){
            $("#myCollapsible").collapse('show');
        });
    });
    </script>

.collapse(‘hide’)
This method hides a collapsible element.
Example

   <script type="text/javascript">
    $(document).ready(function(){
        $(".hide-btn").click(function(){
            $("#myCollapsible").collapse('hide');
        });
    });
    </script>

Events
Bootstrap’s collapse class includes few events for hooking into collapse functionality.

Event Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when sliding transition of a collapsible element has been fully completed.
Example

<script type="text/javascript">
    $(document).ready(function(){
        $("#myCollapsible").on('hidden.bs.collapse', function(){
            alert("Collapsible element has been completely closed.");
        });
    });
    </script>

youporn

Admin has written 171 articles