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.

Show Source


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.

Show Source


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.

Show Source

This page has been viewed: 1353 time(s)