About
collectorium is a lightweight, pure CSS tab solution which is completely functional without JavaScript. You can view the code on GitHub.
Demos
Pure CSS tabs
Second tab content goes here...
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Third tab content goes here...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Fourth tab content goes here...
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
First tab content goes here...
Consetetur sadipscing elitr, sed diam nonumy tempor invidunt ut labore et dolore magna aliquyam erat, sed.
<div class="collectorium">
<ul class="collectorium__tabs" role="tablist">
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab1-1" class="collectorium__tab-link" role="tab" controls="tab1-1">Tab 1</a>
</li>
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab1-2" class="collectorium__tab-link" role="tab" controls="tab1-2">Tab 2</a>
</li>
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab1-3" class="collectorium__tab-link" role="tab" controls="tab1-3">Tab 3</a>
</li>
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab1-4" class="collectorium__tab-link" role="tab" controls="tab1-4">Tab 4</a>
</li>
</ul>
<div class="collectorium__contents">
<a name="tab1-2" id="tab1-2" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">Second tab content goes here...</h5>
<p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<a name="tab1-3" id="tab1-3" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">Third tab content goes here...</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
</section>
<a name="tab1-4" id="tab1-4" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">Fourth tab content goes here...</h5>
<p>Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<a name="tab1-1" id="tab1-1" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">First tab content goes here...</h5>
<p>Consetetur sadipscing elitr, sed diam nonumy tempor invidunt ut labore et dolore magna aliquyam erat, sed.</p>
</section>
</div>
</div>// No JavaScript!JavaScript enhanced tabs
Second tab content goes here...
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Third tab content goes here...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Fourth tab content goes here...
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
First tab content goes here...
Consetetur sadipscing elitr, sed diam nonumy tempor invidunt ut labore et dolore magna aliquyam erat, sed.
<div class="collectorium collectorium-js">
<ul class="collectorium__tabs" role="tablist">
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab2-1" class="collectorium__tab-link" role="tab" controls="tab2-1">Tab 1</a>
</li>
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab2-2" class="collectorium__tab-link" role="tab" controls="tab2-2">Tab 2</a>
</li>
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab2-3" class="collectorium__tab-link" role="tab" controls="tab2-3">Tab 3</a>
</li>
<li class="collectorium__tab-item" role="presentational" >
<a href="#tab2-4" class="collectorium__tab-link" role="tab" controls="tab2-4">Tab 4</a>
</li>
</ul>
<div class="collectorium__contents">
<a name="tab2-2" id="tab2-2" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">Second tab content goes here...</h5>
<p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<a name="tab2-3" id="tab2-3" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">Third tab content goes here...</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
</section>
<a name="tab2-4" id="tab2-4" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">Fourth tab content goes here...</h5>
<p>Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<a name="tab2-1" id="tab2-1" class="collectorium__anchor"></a>
<section role="tabpanel" class="collectorium__content">
<h5 class="c-h5">First tab content goes here...</h5>
<p>Consetetur sadipscing elitr, sed diam nonumy tempor invidunt ut labore et dolore magna aliquyam erat, sed.</p>
</section>
</div>
</div>// Initialize collectorium tabs.
collectorium('.collectorium-js');More projects
avalanche
avalanche is a modular front-end framework which can be extended with npm packages. The goal is to provide a workflow to manage the complexity of big front-end projects.
Learn more about avalanche...
perfundo
perfundo is a pure CSS Lightbox which is completely functional without JavaScript.
Learn more about perfundo...