Accordion

Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header. You can use two types of this element - based on radio buttons state and target ID value. The items may have a vertical or horizontal layout (layout by default is the vertical).

Usage for Radio button type

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 .accordion. If you want to animate Tab appereance add .animated class. To identify active Tab add to the required element <input type="radio"> the attribute checked="checked".

Example #1 (Default no animations, first active Tab)

By default has vertical layout with responsive width and height.

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. Nam vitae ipsum non augue lobortis viverra at molestie felis. Pellentesque egestas mattis aliquet

Show Source

Example #2 (Horizontal with animations, second active Tab)

To apply this feature you need to create specific HTML structure (see Source Code below). To the primary <DIV> element add an additional class .horizontal. This type has fixed width and height so you need to provide above parameters to the primary <DIV> with inline style command, eg. <div class="accordion horizontal" style="width: 660px; height: 440px;">. Also height and line-height style for each Tab element <label>, eg. <label style="height: 440px; line-height: 440px;">.

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. Nam vitae ipsum non augue lobortis viverra at molestie felis. Pellentesque egestas mattis aliquet

Show Source

Usage for ID target type

To apply this feature you need to create specific HTML structure (see Source Code below). The class names to be used for primary <article> element: initial class .accordion. If you want this element should round corners add .bordered class. This type supports up to 10 horizontal Tabs. You need to provide an additional class, which indicates the number of elements used. Also element height with inline style command, eg. <article class="accordion items-3" style="height:220px;"> (for 3 Tabs layout).

Example #3 (Horizontal animated with 5 Tabs)

Title One

This content appears on page 1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.

next ➧

Title Two

This content appears on page 2.

Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.

next ➧

Title Three

This content appears on page 3.

Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu.

next ➧

Title Four

This content appears on page 4.

Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.

next ➧

Title Five

This content appears on page 5.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.

next ➧

Content not loaded

Show Source

If you will use more than 10 Tabs then it is better to use a Vertical layout.

Note: There is not possible to identify the active Tab directly. But you can use this workaround: For the page field "Meta Description" add such line: activetab_acc1, where number determines the active Tab. Eg. activetab_acc3 for the third active Tab.

This page has been viewed: 1726 time(s)