Basically, tabs are mostly used in single page website or display multiple information in less space. You can say tabs are another type of or alternative of an accordion. In other words, tabs are just horizontal mode of the accordion, but tabs come with small heading text comparing to an accordion.
Mostly all tabs are built-in JavaScript or Jquery, But today I am sharing pure CSS tabs with responsive design. This program is completely without JavaScript, No JS or no other JS framework used. This is in pure CSS also with very fewer lines of codes. That makes it a perfect example of pure CSS tabs program.
You just have to create 2 files for creating this program. One for HTML, & one for CSS. Just follow the steps:
-------------------------code 1---------------------------------
<div class="tabset">
<!-- Tab 1 -->
<input type="radio" name="tabset" id="tab1" aria-controls="at_tab-1" checked>
<label for="tab1">Tab 1</label>
<!-- Tab 2 -->
<input type="radio" name="tabset" id="tab2" aria-controls="at_tab-2">
<label for="tab2">Tab 2</label>
<!-- Tab 3 -->
<input type="radio" name="tabset" id="tab3" aria-controls="at_tab-3">
<label for="tab3">Tab 3</label>
<div class="tab-panels">
<section id="at_tab-1" class="tab-panel">
<h2>6A. Märzen</h2>
<p><strong>Overall Impression:</strong> An elegant, malty German amber lager with a clean, rich, toasty and bready malt flavor, restrained bitterness, and a dry finish that encourages another drink. The overall malt impression is soft, elegant, and complex, with a rich aftertaste that is never cloying or heavy.</p>
<p><strong>History:</strong> As the name suggests, brewed as a stronger “March beer” in March and lagered in cold caves over the summer. Modern versions trace back to the lager developed by Spaten in 1841, contemporaneous to the development of Vienna lager. However, the Märzen name is much older than 1841; the early ones were dark brown, and in Austria the name implied a strength band (14 °P) rather than a style. The German amber lager version (in the Viennese style of the time) was first served at Oktoberfest in 1872, a tradition that lasted until 1990 when the golden Festbier was adopted as the standard festival beer.</p>
</section>
<section id="at_tab-2" class="tab-panel">
<h2>6B. Rauchbier</h2>
<p><strong>Overall Impression:</strong> An elegant, malty German amber lager with a balanced, complementary beechwood smoke character. Toasty-rich malt in aroma and flavor, restrained bitterness, low to high smoke flavor, clean fermentation profile, and an attenuated finish are characteristic.</p>
<p><strong>History:</strong> A historical specialty of the city of Bamberg, in the Franconian region of Bavaria in Germany. Beechwood-smoked malt is used to make a Märzen-style amber lager. The smoke character of the malt varies by maltster; some breweries produce their own smoked malt (rauchmalz).</p>
</section>
<section id="at_tab-3" class="tab-panel">
<h2>6C. Dunkles Bock</h2>
<p><strong>Overall Impression:</strong> A dark, strong, malty German lager beer that emphasizes the malty-rich and somewhat toasty qualities of continental malts without being sweet in the finish.</p>
<p><strong>History:</strong> Originated in the Northern German city of Einbeck, which was a brewing center and popular exporter in the days of the Hanseatic League (14th to 17th century). Recreated in Munich starting in the 17th century. The name “bock” is based on a corruption of the name “Einbeck” in the Bavarian dialect, and was thus only used after the beer came to Munich. “Bock” also means “Ram” in German, and is often used in logos and advertisements.</p> </section> </div></div>
<style>
.tabset > input[type="radio"] { position: absolute; left: -200vw; } .tabset .tab-panel { display: none; } .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child, .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2), .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3), .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4), .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5), .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) { display: block; } .tabset > label { position: relative; display: inline-block; padding: 15px 15px 25px; border: 1px solid transparent; border-bottom: 0; cursor: pointer; font-weight: 600; } .tabset > label:hover, .tabset > input:focus + label { color: #06c; } .tabset > label:hover::after, .tabset > input:focus + label::after, .tabset > input:checked + label::after { background: #06c; } .tabset > input:checked + label { border-color: #ccc; border-bottom: 1px solid #fff; margin-bottom: -1px; } .tab-panel { padding: 30px 0; border-top: 1px solid #ccc; }
</style>
--------------------code 2-----------------
<div class="tabs">
<div class="tab-2">
<label for="tab2-1">One</label>
<input checked="checked" id="tab2-1" name="tabs-two" type="radio" />
<div>
<h4>Tab One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat id velit quis vestibulum. Nam id orci eu urna mollis porttitor. Nunc nisi ante, gravida at velit eu, aliquet sodales dui. Sed laoreet condimentum nisi a egestas.</p><p>Donec interdum ante ut enim consequat, quis varius nulla dapibus. Vivamus mollis fermentum augue a varius. Vestibulum in sapien at lectus gravida lobortis vulputate sed metus. Duis scelerisque justo et maximus efficitur. Donec eu eleifend quam. Curabitur aliquet commodo sapien eget vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel aliquet nunc, finibus posuere lorem. Suspendisse consectetur volutpat est ut ornare.</p>
</div>
</div>
<div class="tab-2">
<label for="tab2-2">Two</label>
<input id="tab2-2" name="tabs-two" type="radio" />
<div>
<h4>Tab Two</h4>
<p>Quisque sit amet turpis leo. Maecenas sed dolor mi. Pellentesque varius elit in neque ornare commodo ac non tellus. Mauris id iaculis quam. Donec eu felis quam. Morbi tristique lorem eget iaculis consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at tellus eget risus tempus ultrices. Nam condimentum nisi enim, scelerisque faucibus lectus sodales at.</p>
</div>
</div>
</div>
<style> .tabs { display: block; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; margin: 0; overflow: hidden; } .tabs [class^="tab"] label, .tabs [class*=" tab"] label { color: #333; cursor: pointer; display: block; font-size: 1.1em; font-weight: 300; line-height: 1em; padding: 2rem 0; text-align: center; } .tabs [class^="tab"] [type="radio"], .tabs [class*=" tab"] [type="radio"] { border-bottom: 1px solid rgba(239, 237, 239, 0.5); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus, .tabs [class*=" tab"] [type="radio"]:hover, .tabs [class*=" tab"] [type="radio"]:focus { border-bottom: 1px solid #fd264f;list-style:none;border:none } .tabs [class^="tab"] [type="radio"]:checked, .tabs [class*=" tab"] [type="radio"]:checked { border-bottom: 2px solid #fd264f; } .tabs [class^="tab"] [type="radio"]:checked + div, .tabs [class*=" tab"] [type="radio"]:checked + div { opacity: 1; } .tabs [class^="tab"] [type="radio"] + div, .tabs [class*=" tab"] [type="radio"] + div { display: block; opacity: 0; padding: 2rem 0; width: 90%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs .tab-2 { width: 50%; } .tabs .tab-2 [type="radio"] + div { width: 200%; margin-left: 200%; } .tabs .tab-2 [type="radio"]:checked + div { margin-left: 0; } .tabs .tab-2:last-child [type="radio"] + div { margin-left: 100%; } .tabs .tab-2:last-child [type="radio"]:checked + div { margin-left: -100%; }
</style>
--------------------Code -3-----------
<div class="pc-tab">
<input checked="checked" id="tab1" name="pct" type="radio" />
<input id="tab2" name="pct" type="radio" />
<input id="tab3" name="pct" type="radio" />
<nav>
<ul>
<li class="tab1">
<label for="tab1">First Tab</label>
</li>
<li class="tab2">
<label for="tab2">Second Tab</label>
</li>
<li class="tab3">
<label for="tab3">Third Tab</label>
</li>
</ul>
</nav>
<section>
<div class="tab1">
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
</div>
<div class="tab2">
<h2>Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
</div>
<div class="tab3">
<h2>Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
</div>
</section>
</div>
<style>
.pc-tab > input, .pc-tab section > div { display: none; } #tab1:checked ~ section .tab1, #tab2:checked ~ section .tab2, #tab3:checked ~ section .tab3 { display: block; } #tab1:checked ~ nav .tab1, #tab2:checked ~ nav .tab2, #tab3:checked ~ nav .tab3 { color: red; } } .pc-tab { width: 100%; max-width: 700px; margin: 0 auto; } .pc-tab ul {display: flex; list-style: none; margin: 0; padding: 0; } .pc-tab ul li label { float: left; padding:15px; border: 1px solid #ddd; border-bottom: 0; background: #eee; color: #444; } .pc-tab ul li label:hover { background: #ddd; } .pc-tab ul li label:active { background: #fff; } .pc-tab ul li:not(:last-child) label { border-right-width: 0; } .pc-tab section { clear: both; } .pc-tab section div { padding: 20px; background: #fff; line-height: 1.5em; letter-spacing: 0.3px; color: #444; } .pc-tab section div h2 { margin: 0; letter-spacing: 1px; color: #34495e; } #tab1:checked ~ nav .tab1 label, #tab2:checked ~ nav .tab2 label, #tab3:checked ~ nav .tab3 label { background: white; color: #111; position: relative; } #tab1:checked ~ nav .tab1 label:after, #tab2:checked ~ nav .tab2 label:after, #tab3:checked ~ nav .tab3 label:after { content: ''; display: block; position: absolute; height: 2px; width: 100%; background: #fff; left: 0; bottom: -1px; }
</style>