Animated Content Tabs
Create a tabbed list of items, allowing each item's content to be viewed by clicking its header. This element - based on radio buttons state. The items Tab header may have a vertical or horizontal layout (layout by default is the horizontal).
Usage
To apply this feature you need to create specific HTML structure (see Source Code below). The class names to be used for primary <DIV> element: initial class .tabs. If you want to animate tab content appereance add .animated class will be used effect "fade". You can use 2 more predefined animation effects: "toggle from the side" and "toggle from the top". Just add an additional class .from-side or .from-top. To identify active Tab add to the required element <input type="radio"> the attribute checked="checked". Desired Tabs elements height can be changed in the variables.less file.
Example #1 (Default no animations, first active Tab)
Tab One Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis, orci at commodo hendrerit, augue tellus gravida nibh, interdum mollis purus turpis vel felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras volutpat pretium neque id rhoncus. Nulla facilisi. In porttitor leo leo, tincidunt pulvinar ante tempor vel. Etiam ac consectetur turpis. Proin eleifend, urna eget tincidunt iaculis, ex sem faucibus sem, eu ullamcorper justo quam ut tellus.Tab Two Content
Proin tristique elit in facilisis fermentum. Morbi vitae velit libero. Nullam laoreet ullamcorper leo, ac fermentum ex laoreet ut. Ut vitae tellus consequat, interdum mauris ut, bibendum erat. Maecenas tincidunt nibh pharetra, facilisis urna ac, scelerisque leo. Nulla ornare a mi in molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mauris odio, aliquet vitae nisi id, egestas lobortis magna. Suspendisse in dignissim massa. Maecenas ornare eget nibh a placerat. In arcu tortor, eleifend vitae lorem nec, bibendum sodales mi.Tab Three Content
Donec interdum augue gravida nisl luctus congue. Nulla vestibulum, orci sit amet placerat vehicula, dolor arcu vestibulum mi, eget condimentum diam quam ut justo. Curabitur hendrerit nulla ut convallis efficitur. Morbi ante lorem, consequat in lacus eget, congue euismod nulla. Phasellus tortor leo, facilisis eu mi non, consequat cursus enim. Cras cursus tellus turpis, eu congue enim commodo ut. Sed hendrerit efficitur dignissim.Tab Four Content
Nullam varius vestibulum massa eu facilisis. Phasellus blandit odio at felis ultricies accumsan porttitor sed nunc. Aliquam efficitur laoreet tempus. Aenean ex odio, bibendum id tellus vitae, porttitor ornare ligula. Phasellus lobortis et lectus a volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean tempor consequat porta. Quisque molestie interdum hendrerit. Sed pellentesque ex eget ullamcorper ultrices. Cras ipsum libero, pharetra in pharetra id, pellentesque pharetra velit. In enim augue, viverra at libero nec, placerat vulputate augue. Integer consectetur, massa id commodo congue, purus augue mollis dolor, at commodo dolor tellus vestibulum augue. In ullamcorper ipsum ac felis scelerisque, ut sodales nisi laoreet.Source Code:
<div class="tabs">
<div class="tab">
<input checked="checked" class="tab-switch" id="tab-1" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-1">Tab One</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab One Content</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-2" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-2">Tab Two</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Two Content</h3>
Proin tristique elit in facilisis fermentum.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-3" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-3">Tab Three</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Three Content</h3>
Donec interdum augue gravida nisl luctus congue.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-4" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-4">Tab Four</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Four Content</h3>
Nullam varius vestibulum massa eu facilisis.</div>
</div>
</div>
</div>
Example #2 (Default with animations toggle from the side, second active Tab)
Tab One Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis, orci at commodo hendrerit, augue tellus gravida nibh, interdum mollis purus turpis vel felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras volutpat pretium neque id rhoncus. Nulla facilisi. In porttitor leo leo, tincidunt pulvinar ante tempor vel. Etiam ac consectetur turpis. Proin eleifend, urna eget tincidunt iaculis, ex sem faucibus sem, eu ullamcorper justo quam ut tellus.Tab Two Content
Proin tristique elit in facilisis fermentum. Morbi vitae velit libero. Nullam laoreet ullamcorper leo, ac fermentum ex laoreet ut. Ut vitae tellus consequat, interdum mauris ut, bibendum erat. Maecenas tincidunt nibh pharetra, facilisis urna ac, scelerisque leo. Nulla ornare a mi in molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mauris odio, aliquet vitae nisi id, egestas lobortis magna. Suspendisse in dignissim massa. Maecenas ornare eget nibh a placerat. In arcu tortor, eleifend vitae lorem nec, bibendum sodales mi.Tab Three Content
Donec interdum augue gravida nisl luctus congue. Nulla vestibulum, orci sit amet placerat vehicula, dolor arcu vestibulum mi, eget condimentum diam quam ut justo. Curabitur hendrerit nulla ut convallis efficitur. Morbi ante lorem, consequat in lacus eget, congue euismod nulla. Phasellus tortor leo, facilisis eu mi non, consequat cursus enim. Cras cursus tellus turpis, eu congue enim commodo ut. Sed hendrerit efficitur dignissim.
Tab Four Content
Nullam varius vestibulum massa eu facilisis. Phasellus blandit odio at felis ultricies accumsan porttitor sed nunc. Aliquam efficitur laoreet tempus. Aenean ex odio, bibendum id tellus vitae, porttitor ornare ligula. Phasellus lobortis et lectus a volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean tempor consequat porta. Quisque molestie interdum hendrerit. Sed pellentesque ex eget ullamcorper ultrices. Cras ipsum libero, pharetra in pharetra id, pellentesque pharetra velit. In enim augue, viverra at libero nec, placerat vulputate augue. Integer consectetur, massa id commodo congue, purus augue mollis dolor, at commodo dolor tellus vestibulum augue. In ullamcorper ipsum ac felis scelerisque, ut sodales nisi laoreet.
Source Code:
<div class="tabs animated from-side">
<div class="tab">
<input class="tab-switch" id="tab-1" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-1">Tab One</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab One Content</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="tab">
<input checked="checked" class="tab-switch" id="tab-2" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-2">Tab Two</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Two Content</h3>
Proin tristique elit in facilisis fermentum.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-3" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-3">Tab Three</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Three Content</h3>
Donec interdum augue gravida nisl luctus congue.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-4" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-4">Tab Four</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Four Content</h3>
Nullam varius vestibulum massa eu facilisis.</div>
</div>
</div>
</div>
Example #3 (Context on the right with fade animations, third active Tab)
To apply vertical layout to main <div> add an additional class .left-side. Desired Tab header elements width can be changed in the variables.less file.
Tab One Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis, orci at commodo hendrerit, augue tellus gravida nibh, interdum mollis purus turpis vel felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras volutpat pretium neque id rhoncus. Nulla facilisi. In porttitor leo leo, tincidunt pulvinar ante tempor vel. Etiam ac consectetur turpis. Proin eleifend, urna eget tincidunt iaculis, ex sem faucibus sem, eu ullamcorper justo quam ut tellus.Tab Two Content
Proin tristique elit in facilisis fermentum. Morbi vitae velit libero. Nullam laoreet ullamcorper leo, ac fermentum ex laoreet ut. Ut vitae tellus consequat, interdum mauris ut, bibendum erat. Maecenas tincidunt nibh pharetra, facilisis urna ac, scelerisque leo. Nulla ornare a mi in molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mauris odio, aliquet vitae nisi id, egestas lobortis magna. Suspendisse in dignissim massa. Maecenas ornare eget nibh a placerat. In arcu tortor, eleifend vitae lorem nec, bibendum sodales mi.Tab Three Content
Donec interdum augue gravida nisl luctus congue. Nulla vestibulum, orci sit amet placerat vehicula, dolor arcu vestibulum mi, eget condimentum diam quam ut justo. Curabitur hendrerit nulla ut convallis efficitur. Morbi ante lorem, consequat in lacus eget, congue euismod nulla. Phasellus tortor leo, facilisis eu mi non, consequat cursus enim. Cras cursus tellus turpis, eu congue enim commodo ut. Sed hendrerit efficitur dignissim.Tab Four Content
Nullam varius vestibulum massa eu facilisis. Phasellus blandit odio at felis ultricies accumsan porttitor sed nunc. Aliquam efficitur laoreet tempus. Aenean ex odio, bibendum id tellus vitae, porttitor ornare ligula. Phasellus lobortis et lectus a volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean tempor consequat porta. Quisque molestie interdum hendrerit. Sed pellentesque ex eget ullamcorper ultrices.Source Code:
<div class="tabs animated left-side">
<div class="tab">
<input class="tab-switch" id="tab-1" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-1">Tab One</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab One Content</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-2" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-2">Tab Two</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Two Content</h3>
Proin tristique elit in facilisis fermentum.</div>
</div>
</div>
<div class="tab">
<input checked="checked" class="tab-switch" id="tab-3" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-3">Tab Three</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Three Content</h3>
Donec interdum augue gravida nisl luctus congue.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-4" name="css-tabs" type="radio" />
<label class="tab-label" for="tab-4">Tab Four</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Four Content</h3>
Nullam varius vestibulum massa eu facilisis.</div>
</div>
</div>
</div>