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 aliquetSource Code:
<div class="accordion">
<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. Mauris lobortis, orci at commodo hendrerit, augue tellus gravida nibh, interdum mollis purus turpis vel felis.
</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. Morbi vitae velit libero. Nullam laoreet ullamcorper leo, ac fermentum ex laoreet ut.
</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. Nulla vestibulum, orci sit amet placerat vehicula, dolor arcu vestibulum mi, eget condimentum diam quam ut justo.
</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. Phasellus blandit odio at felis ultricies accumsan porttitor sed nunc.
</div>
</div>
</div>
</div>
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 aliquetSource Code:
<div class="accordion horizontal animated" style="width: 660px;height: 440px;">
<div class="tab">
<input checked="checked" class="tab-switch" id="tab-2-1" name="css-tabs-2" type="radio" />
<label class="tab-label" for="tab-2-1" style="height: 440px;line-height: 440px;">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-2" name="css-tabs-2" type="radio" />
<label class="tab-label" for="tab-2-2" style="height: 440px;line-height: 440px;">Tab Two</label>
<div class="tab-content-outer">
<div class="tab-content">
<h3>Tab Two Content</h3>
Proin tristique elit in facilisis fermentum. Morbi vitae velit libero.</div>
</div>
</div>
<div class="tab">
<input class="tab-switch" id="tab-2-3" name="css-tabs-2" type="radio" />
<label class="tab-label" for="tab-2-3" style="height: 440px;line-height: 440px;">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-2-4" name="css-tabs-2" type="radio" />
<label class="tab-label" for="tab-2-4" style="height: 440px;line-height: 440px;">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>
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 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.
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.
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.
Source Code:
<article class="accordion bordered items-5" style="height:220px;">
<section id="acc1">
<div class="sect-outer">
<h2><a href="#acc1">Title One</a></h2>
<p>This content appears on page 1.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="accnav"><a href="#acc2">next ?</a></p>
</div>
</section>
<section id="acc2">
<div class="sect-outer">
<h2><a href="#acc2">Title Two</a></h2>
<p>This content appears on page 2.</p>
<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod.</p>
<p class="accnav"><a href="#acc3">next ?</a></p>
</div>
</section>
<section id="acc3">
<div class="sect-outer">
<h2><a href="#acc3">Title Three</a></h2>
<p>This content appears on page 3.</p>
<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh.</p>
<p class="accnav"><a href="#acc4">next ?</a></p>
</div>
</section>
<section id="acc4">
<div class="sect-outer">
<h2><a href="#acc4">Title Four</a></h2>
<p>This content appears on page 4.</p>
<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. </p>
<p class="accnav"><a href="#acc5">next ?</a></p>
</div>
</section>
<section id="acc5">
<div class="sect-outer">
<h2><a href="#acc5">Title Five</a></h2>
<p>This content appears on page 5.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="accnav"><a href="#acc1">next ?</a></p>
</div>
</section>
<span class="accord-descr">Content not loaded</span></article>
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.