Tabs, Toggles and Accordions

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

Rich typography to match your design

Typography Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices.

Learn more

Filterable and sortable portfolio

TypographyMauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui. Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor.

See it in action

Plethora of Stunning Colors

ColorsMaecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices.

See more

Cross browser compatibility

Cross-platformLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem. Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis.

Think you like it? Buy now
  • 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

Bring your ideas to life with a new design

Typography Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices.

Learn more

Showcase your work with ease

TypographyMauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui. Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor.

See it in action

The right time to think of Cloud Computing

CloudsMaecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices.

See more

Get in touch with us on customization

MailLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem. Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Think you like it? Buy now
  • 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.

Rich Typography

Rich typography to match your design

Typography Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices.

Learn more

Dynamic Portfolio

Filterable and sortable portfolio

TypographyMauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui. Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor.

See it in action

Multiple Colors

Plethora of Stunning Colors

ColorsMaecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices.

See more

Cross Platform

Cross browser compatibility

Cross-platformLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem. Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Think you like it? Buy now
  • 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>