Accordion

Below is example of accordion section which is used in some of sections in landing pages.

image

<div class="panel-group" id="accordion" role="tablist">
     
    <!-- panel -->
    <div class="panel">
        <div class="panel-hd">
            <a role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true">
                TITLE OF PANEL
                <i class="panel-open fa fa-plus-circle"></i><i class="panel-close fa fa-minus-circle"></i>
            </a>
        </div>
        <div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
            <div class="panel-body">
                ... COTNENT OF PANEL ...
            </div>
        </div>
    </div><!-- /.panel -->
     
    <!-- panel -->
    <div class="panel">
        <div class="panel-hd">
            <a role="tab" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="true">
                ....
                <i class="panel-open fa fa-plus-circle"></i><i class="panel-close fa fa-minus-circle"></i>
            </a>
        </div>
        <div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div><!-- /.panel -->
     
</div>
  • Apply ID on main parent element as display in line no.1.
  • Use that parent element ID in data-parent=”#accordion” attribute as display in above code line no.6
  • Apply ID on all panels as display in above code line no.11. Use that ID in href=”#collapse-1″ as display on line no.6

 

Related Articles