CSS Tabs

To use tabs as a tool for elegant information sharing, we can use predefined plugins or we can create them with the help of CSS and JavaScript. To avoid, for various reasons, the use of JS, we render two surrogate variants.

Radio buttons

Code

<!DOCTYPE html>
<html>
  <head>
    <style>
      .taburi_css {
        position: relative;
        min-height: 200px; /* This part sucks */
        clear: both;
        margin: 25px 0;
      }
      .tab_css {
        float: left;
      }
      .tab_css label {
        background: #eee;
        padding: 10px;
        border: 1px solid #ccc;
        margin-left: -1px;
        position: relative;
        left: 1px;
      }
      .tab_css [type="radio"] {
        opacity: 0;
      }
      .contin {
        position: absolute;
        top: 28px;
        left: 0;
        background: white;
        right: 0;
        bottom: 0;
        padding: 20px;
        border: 1px solid #ccc;
        overflow: hidden;
      }
      .contin > * {
        opacity: 0;
        transform: translateX(-100%);
        transition: all 0.6s ease;
      }
      [type="radio"]:focus ~ label {
        ouline: 2px solid blue;
      }
      [type="radio"]:checked ~ label {
        background: white;
        border-bottom: 1px solid white;
        z-index: 2;
      }
      [type="radio"]:checked ~ label ~ .contin {
        z-index: 1;
      }
      [type="radio"]:checked ~ label ~ .contin > * {
        opacity: 1;
        transform: translateX(0);
      }
    </style>
  </head>
  <body>
    <div class="taburi_css">
      <div class="tab_css">
        <input type="radio" id="tab-1" checked>
        <label for="tab-1">Tab 1</label>
        <div class="contin">
          <p>          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>
        </div>
      </div>
      <div class="tab_css">
        <input type="radio" id="tab-2" >
        <label for="tab-2">Tab 2</label>
        <div class="contin">
          <p>          Phasellus porttitor malesuada est vel laoreet. Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>
        </div>
      </div>
      <div class="tab_css">
        <input type="radio" id="tab-3" >
        <label for="tab-3">Tab 3</label>
        <div class="contin">
          <p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
            enim ac dui.</p>
          <p>Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.taburi_css {

position: relative;

min-height: 200px; /* This part sucks */

clear: both;

margin: 25px 0;

}

.tab_css {

float: left;

}

.tab_css label {

background: #eee;

padding: 10px;

border: 1px solid #ccc;

margin-left: -1px;

position: relative;

left: 1px;

}

.tab_css [type="radio"] {

opacity: 0;

}

.contin {

position: absolute;

top: 28px;

left: 0;

background: white;

right: 0;

bottom: 0;

padding: 20px;

border: 1px solid #ccc;

overflow: hidden;

}

.contin > * {

opacity: 0;

transform: translateX(-100%);

transition: all 0.6s ease;

}

[type="radio"]:focus ~ label {

ouline: 2px solid blue;

}

[type="radio"]:checked ~ label {

background: white;

border-bottom: 1px solid white;

z-index: 2;

}

[type="radio"]:checked ~ label ~ .contin {

z-index: 1;

}

[type="radio"]:checked ~ label ~ .contin > * {

opacity: 1;

transform: translateX(0);

}

</style>

</head>

<body>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>

</div>

<p> Phasellus porttitor malesuada est vel laoreet. Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>

</div>

<p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus

enim ac dui.</p>

<p>Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>

</div>

</body>

</html>

Output

Lorem ipsum dolor

Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.

Phasellus porttitor

Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

Ut sed dictum dolor

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec eget pharetra risus. Ut sed dictum dolor, ac fringilla velit. Sed eu sapien magna. Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus.

Source: CSS-Tricks.com

Using the DETAILS+SUMMARY

Code

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
    <style>
      .det_sum_ext { 
        height: auto;
        position: relative;
        border: 0px solid green; 
        margin-top:20px;}
      .det_sum_in {
        margin: 0;
        position: absolute;
        top: 0%;
        left: 0%;
        -ms-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        width:100%;
        height: auto;
        border: 0px solid red; }
      details summary {
        list-style: none;
        float:left;
        position: fixed;
        top: 0;
        left: 10px;
        border:3px outset lightgrey;
        padding:5px 10px;
        margin:-20px 0 0 0;
        width:27%;}
      details > summary:before
      , details[open] summary:before {
        border-radius: 5px; 
        content: "f07b";
        font-family: 'Font Awesome 5 Free'; 
        font-weight: 900;
        color: #000;
        display: block; 
        float: left; 
        font-size: 1.5em; 
        margin: -4px 10px 0 10px; 
        padding: 0; 
        text-align: center; 
        width: 20px; }
      details[open] summary:before {content: "f07c"; color: #f00;}            
      details summary:after { 
        content: "";
        display: block;
        clear: both; }
      details summary#s1 {left:0;}
      details summary#s2 {left:33%;}
      details summary#s3 {left:66%;}
    </style>
  </head>
  <body>
    <div class="det_sum_ext">
      <div class="det_sum_in">
        <details>      
          <summary id="s1">Lorem ipsum dolor sit amet</summary>
          <h5>Sectiunea 1</h5> <p>Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>
        </details>
        <details>
          <summary id="s2">Phasellus porttitor malesuada</summary>
          <h5>Sectiunea 2</h5> <p>Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>
        </details>
        <details>
          <summary id="s3">Ut sed dictum dolor</summary>
          <h5>Sectiunea 3</h5> <p>Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>
        </details>
      </div>
    </div>   
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.det_sum_ext {

height: auto;

position: relative;

border: 0px solid green;

margin-top:20px;}

.det_sum_in {

margin: 0;

position: absolute;

top: 0%;

left: 0%;

-ms-transform: translate(0%, 0%);

transform: translate(0%, 0%);

width:100%;

height: auto;

border: 0px solid red; }

details summary {

list-style: none;

float:left;

position: fixed;

top: 0;

left: 10px;

border:3px outset lightgrey;

padding:5px 10px;

margin:-20px 0 0 0;

width:27%;}

details > summary:before

, details[open] summary:before {

border-radius: 5px;

content: "f07b";

font-family: 'Font Awesome 5 Free';

font-weight: 900;

color: #000;

display: block;

float: left;

font-size: 1.5em;

margin: -4px 10px 0 10px;

padding: 0;

text-align: center;

width: 20px; }

details[open] summary:before {content: "f07c"; color: #f00;}

details summary:after {

content: "";

display: block;

clear: both; }

details summary#s1 {left:0;}

details summary#s2 {left:33%;}

details summary#s3 {left:66%;}

</style>

</head>

<body>

<summary id="s1">Lorem ipsum dolor sit amet</summary>

<h5>Sectiunea 1</h5> <p>Sed eu quam in magna facilisis sagittis scelerisque et est. Mauris tellus felis, hendrerit nec nunc auctor, dignissim vehicula lectus. Mauris at nisl urna. Aliquam erat volutpat. Aenean in lobortis enim. Integer scelerisque mauris ipsum, vitae faucibus nibh ullamcorper at. Fusce interdum accumsan tellus eu ornare. Nam scelerisque tortor a urna imperdiet imperdiet. Cras sed leo id libero sollicitudin fermentum. Fusce tristique ultrices neque quis vulputate.</p>

</details>

<summary id="s2">Phasellus porttitor malesuada</summary>

<h5>Sectiunea 2</h5> <p>Donec at ultrices velit. Sed vitae mattis sem. Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.</p>

</details>

<summary id="s3">Ut sed dictum dolor</summary>

<h5>Sectiunea 3</h5> <p>Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.</p>

</details>

</div>

</body>

</html>

Output

Lorem ipsum dolor

Section 1

Phasellus porttitor

Section 2

Ut sed dictum dolor

Section 3

And yet a little JS

If we would like, in the previous example, when opening a tab, to close the previously opened one, we can use a bit of JavaScript, by placing it in a localized script before closing the Body tag. Thus, to the details tags we could add a function for the onClick event; thus, we will have for each section: <details onclick="fc_inchid_tab(fc_tab_activ(this));"><details onclick="fc_inchid_tab(fc_tab_activ(this));">

    <script type="text/javascript">
      function fc_tab_activ(tabul){
        var pcte = tabul.parentNode.childNodes, pct;
        var i = 0, count = i;
        while( (pct=pcte.item(i++)) && pct!=tabul )
          if( pct.nodeType==1 ) count++;
        return count;
      }

      function fc_inchid_tab(index){
        var len = document.getElementsByTagName("details").length;

        for(var i=0; i<len; i++){
          if(i != index){
            document.getElementsByTagName("details")[i].removeAttribute("open");
          }
        }
      }
    </script>

function fc_tab_activ(tabul){

var pcte = tabul.parentNode.childNodes, pct;

var i = 0, count = i;

while( (pct=pcte.item(i++)) && pct!=tabul )

if( pct.nodeType==1 ) count++;

return count;

}

function fc_inchid_tab(index){

var len = document.getElementsByTagName("details").length;

for(var i=0; i<len; i++){

if(i != index){

document.getElementsByTagName("details")[i].removeAttribute("open");

}

</script>

Output

Lorem ipsum dolor

Section 1

Phasellus porttitor

Section 2

Ut sed dictum dolor

Section 3

Duis ullamcorper, nisl quis maximus auctor, massa sem imperdiet ante, at tincidunt nibh metus eu risus. Ut luctus risus tellus. Vestibulum enim ligula, molestie nec finibus a, semper nec tortor. Suspendisse sed sapien sit amet nunc bibendum sagittis sit amet ac dolor. Morbi diam lacus, ornare in congue id, lacinia et purus. Nullam purus leo, vehicula non ante eu, sagittis ultricies lacus. Phasellus massa nisl, semper sit amet neque a, scelerisque pretium odio. Curabitur ac nunc augue. Pellentesque sed imperdiet lorem, nec iaculis augue. Aliquam erat volutpat.
Suspendisse sit amet ligula vel dolor blandit congue id eget velit. Nunc laoreet ultrices velit in volutpat. Aenean mattis, sem ut sollicitudin vehicula, quam augue dapibus erat, non bibendum neque orci id odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce convallis ut orci sed gravida. Donec ac iaculis lorem, sit amet mattis quam. Ut fringilla nisi nulla, vel maximus urna volutpat at. Duis in arcu quis odio aliquet ultricies a eu lorem. Fusce dignissim faucibus laoreet. Pellentesque congue ex purus, at laoreet mi consequat nec.

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

CSS Tabs

Radio buttons

Code

Output

Using the DETAILS+SUMMARY

Code

Output

Section 1

Section 2

Section 3

And yet a little JS

Output

Section 1

Section 2

Section 3

Alte articole (posibil) interesante

Author: Ovidiu.S

Leave a ReplyCancel reply

Utilities

Categories

Pages

Recent Posts

Archives

Projects

Radio buttons

Code

Output

Using the DETAILS+SUMMARY

Code

Output

Section 1

Section 2

Section 3

And yet a little JS

Output

Section 1

Section 2

Section 3

Partajează asta:

Alte articole (posibil) interesante

Author: Ovidiu.S

Leave a ReplyCancel reply

Utilities

Categories

Pages

Recent Posts

Archives

Projects

Tags