An accordion allows users to toggle the display of sections of content. the accordion system works dynamicly dosnt have to do any javascript options just build up your HTML Structure and get working. you can use the tornado theme of accordion or you can make your on theme.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
<!-- Accordion Wraper -->
<div class="accordion tornado-ui">
<!-- Accordion item -->
<div class="accordion-item">
<div class="accordion-title ti-chevron-down">Accordion Title #1</div>
<div class="accordion-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>
</div>
<!-- // Accordion item -->
<!-- Accordion item -->
<div class="accordion-item">
<div class="accordion-title ti-chevron-down">Accordion Title #2</div>
<div class="accordion-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>
</div>
<!-- // Accordion item -->
<!-- Accordion item -->
<div class="accordion-item">
<div class="accordion-title ti-chevron-down">Accordion Title #3</div>
<div class="accordion-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</div>
</div>
<!-- // Accordion item -->
</div>
<!-- // End Accordion Wraper -->
<!-- Accordion Wraper -->
<div class="accordion">
<!-- Accordion -->
<div class="accordion-item">
<div class="accordion-title"> Accordion Title </div>
<div class="accordion-content"> Accordion Content </div>
</div>
<!-- // Accordion -->
<!-- Accordion -->
<div class="accordion-item">
<div class="accordion-title"> Accordion Title </div>
<div class="accordion-content"> Accordion Content </div>
</div>
<!-- // Accordion -->
</div>
<!-- // End Accordion Wraper -->
<!-- Accordion Wraper -->
<div class="accordion collapsed">
<!-- Accordion -->
<div class="accordion-title"> Accordion Title </div>
<div class="accordion-content"> Accordion Content </div>
<!-- // Accordion -->
<!-- Active Accordion -->
<div class="accordion-title active"> Accordion Title </div>
<div class="accordion-content active"> Accordion Content </div>
<!-- // Active Accordion -->
</div>
<!-- // End Accordion Wraper -->
A tab is a hidden section of content activated by a menu . in the code below you will see the main syntax for the tabs.
<!-- Tabs Wraper -->
<div class="tabs">
<!-- Tabs Menu -->
<ul class="tabs-menu">
<li data-tab="tab1">Tab #1</li> <!-- activated tab -->
<li data-tab="tab2">Tab #2</li>
<li data-tab="tab3">Tab #3</li>
<li data-tab="tab4">Tab #4</li>
</ul>
<!-- // Tabs Menu -->
<!-- activated Tab Content -->
<div class="tab-content" id="tab1"> Yor Content </div>
<!-- Hidden Tab Content -->
<div class="tab-content" id="tab2"> Yor Content </div>
<!-- Hidden Tab Content -->
<div class="tab-content" id="tab3"> Yor Content </div>
<!-- Hidden Tab Content -->
<div class="tab-content" id="tab4"> Yor Content </div>
</div>
<!-- Tabs Wraper -->
Tornado horizontal theme of the tabs menu
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<!-- Tabs Wraper -->
<div class="tabs tornado-ui">
<!-- Tabs Menu -->
<ul class="tabs-menu">
<li data-tab="tab1">Tab #1</li>
<li data-tab="tab2">Tab #2</li>
<li data-tab="tab3">Tab #3</li>
<li data-tab="tab4">Tab #4</li>
</ul>
<!-- // Tabs Menu -->
<!-- Tab Content -->
<div class="tab-content" id="tab1"> This Tab Content #1 </div>
<!-- Tab Content -->
<div class="tab-content" id="tab2"> This Tab Content #2 </div>
<!-- Tab Content -->
<div class="tab-content" id="tab3"> This Tab Content #3 </div>
<!-- Tab Content -->
<div class="tab-content" id="tab4"> This Tab Content #4 </div>
</div>
<!-- Tabs Wraper -->
Tornado vertical theme of the tabs menu
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<!-- Tabs Wraper -->
<div class="tabs tornado-ui row">
<!-- Tabs Menu -->
<ul class="tabs-menu vertical col-s-2">
<li class="active" data-tab="tab1">Tab #1</li>
<li data-tab="tab2">Tab #2</li>
<li data-tab="tab3">Tab #3</li>
<li data-tab="tab4">Tab #4</li>
</ul>
<!-- // Tabs Menu -->
<!-- Tab Content -->
<div class="tab-content active col-s-10" id="tab1"> This Tab Content #1 </div>
<!-- Tab Content -->
<div class="tab-content col-s-10" id="tab2"> This Tab Content #2 </div>
<!-- Tab Content -->
<div class="tab-content col-s-10" id="tab3"> This Tab Content #3 </div>
<!-- Tab Content -->
<div class="tab-content col-s-10" id="tab4"> This Tab Content #4 </div>
</div>
<!-- Tabs Wraper -->