Tabs

Tabs are a nice way to reduce information clatter on a page by grouping content into clickable panes which helps focus the user's attention on the current highlighted item. They allow the user to only view what he/she is interested in with a sleek fade or slide transition between panes and nice hover effect on tabs.

Tabs on top with automatic fade transition

• View code

  <ul class="css-tabs white-top">
  	<li><a href="#">Tab 1</a></li>
  	<li><a href="#">Tab 2</a></li>
  	<li><a href="#">Tab 3</a></li>
  </ul>
  
  <div id="panes-top" class="css-panes white-top">
  	<div>...</div>
  	<div>...</div>
  	<div>...</div>
  </div>

Bottom Tabs with fade transition

You can also switch the tabs and position them on the bottom of the panes by alternating the order of the tabs and panes div and using the class 'color'-bottom e.g. white-bottom

• View code

  <div id="panes-bottom">
  	<div>...</div>
  	<div>...</div>
  	<div>...</div>
  	<div>...</div>
  </div>
  
  <div id="nav2">
  <ul>
  	<li><a href="#">Tab 1</a></li>
  	<li><a href="#">Tab 2</a></li>
  	<li><a href="#">Tab 3</a></li>
  	<li><a href="#">Tab 4</a></li>
  </ul>
  </div>
  

Toggles

Toggles are a nice way to minimize hidden sections on a page by only showing titles of the hidden text while maximizing on space. This allows the user to only view what he/she is interested in with a sleek slide down/up of the hidden content. A good example on how to use them is FAQs

• View code

  <ul class="showhide"> 
  	<li class="open"> 
  		<span class="grip"></span>
  		<h4 class="title">title of toggle</h4> 
  		<section> 
  			<p>Your hidden content here</p>
  		</section> 
  	</li>
  </ul>

You can also use the toggles to show and hide a list of faq asked questions like shown here. To keep a toggle open when the page is loaded, add the 'open' class to the list item as shown below:

• This is an open toggle

  <ul class="showhide"> 
  	<li class="open"> 
  		<span class="grip"></span>
  		<h4 class="title">title of toggle</h4> 
  		<section> 
  			<p>Your hidden content here</p>
  		</section> 
  	</li>
  </ul>

• This is a closed toggle

  <ul class="showhide"> 
  	<li> 
  		<span class="grip"></span>
  		<h4 class="title">title of toggle</h4> 
  		<section> 
  			<p>Your hidden content here</p>
  		</section> 
  	</li>
  </ul>

Accordions

Accordions work similarly to tabs by only showing one pane of content at a time. Accordions are also a nice way to minimize hidden sections on a page by only showing titles of the hidden text while maximizing on space. To keep a specific pane open, add style="display:block" on the respective div.

• View code

  <div id="accordion" class="accord-id">
  
  	<h2 class="current">First pane</h2>
  	<div class="pane" style="display:block">... pane content ...</div>
  
  	<h2>Second pane</h2>
  	<div class="pane">... pane content ...</div>
  
  	<h2>Third pane</h2>
  	<div class="pane">... pane content ...</div>
  
  </div>