Author: | vikhardina |
---|---|
Views Total: | 3,057 views |
Official Page: | Go to website |
Last Update: | April 7, 2016 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 tabs component that will be automatically converted into a more readable accordion interface on small screens like Mobile devices.
How to use it:
Create a normal tabs interface from an html list.
<ul class="tabs"> <li id="option1"> <a href="#option1">Option 1</a> <div> <h2>Heading 1</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> </div> </li> <li id="option2"> <a href="#option2">Option 2</a> <div> <h2>Heading 2</h2> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in piece</p> </div> </li> <li id="option3"> <a href="#option3">Option 3</a> <div> <h2>Heading 3</h2> <p>There are many variations of passages of Lorem Ipsum available</p> </div> </li> </ul>
The basic CSS styles to style the tabs component.
.tabs { position: relative; margin: 0; padding: 15px; font-size: 0; } .tabs li { display: inline-block; margin-right: 1px; list-style-type: none; font-size: 14px; } .tabs li:last-child { margin-right: 0; } .tabs li a { display: block; padding: 10px 15px; background: rgba(219,219,219,1); text-decoration: none; color: #4B5056; transition: background 0.5s ease; } .tabs a + div { position: absolute; left: 0; height: 0; padding: 0 15px; overflow: hidden; } .tabs :target a { background: rgba(219,219,219,0); } .tabs :target a + div { height: 100%; overflow: visible; }
Use CSS media queries to detect the screen size and convert the tabs interface into an accordion when the screen size is smaller than 768px.
@media (max-width: 768px) { .tabs a { width: 100%; } .tabs a + div { position: static; float: left; } .tabs li { display: block; overflow: hidden; margin: 0 0 1px 0; } }