Accordion

Displays collapsible content panels for presenting information in a limited amount of space..

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.
For connect accordion to <ul> add the class .accordion For example:

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion"> 
   <li>
      <h3>
         <a href="#section1">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>

Toggle icons

Auto using toggle icon

By using the class .icon-toggle in a li > a you will add the icons ► - when section closed and ▼ - when section opens.
For example:

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion"> 
   <li class="active">
      <h3>
         <a href="#section1" class="icon-toggle">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2" class="icon-toggle">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>

Custom icons

Displays collapsible content

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.
For connect accordion to <ul> add the class .accordion For example:

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion"> 
   <li>
      <h3>
         <a href="#section1" class="icon-brain">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2" class="icon-lab">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>

Extrastyles

Displays collapsible content

If you want to deafault open view some section in same time add the class .active to section of <li>.
You can round the corners and alter size of sections of accordion. For to alter the radius of corners add the class .bradius-x (1,2,3,4) to section of <li>. For to alter the size of sections add the classes .small , .medium, .large, .xlarge to section

  • Section 1
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 2
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

  • Section 3
    For the displaying of data in tabular form you can use tables.

    You can alter the radius of corners and size of tables. For to add the rounded corners you can add .bradius-x class to table tag.

HTML Example
<ul class="accordion medium"> 
   <li>
      <h3>
         <a href="#section1">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
   <li>
      <h3>
         <a href="#section2">  ... </a>
      </h3>
      <div class="content">
         ...
      </div>
   </li>
</ul>