CSS tab system with input radio (no js)

Question

Good evening all,

my name is Erika and I am working on a website.

I have a good understanding of html and css however I got stuck with this problem: and for this reason I am writing on stackoverflow.

I want to make this tab system work, however I am struggling to understand how I can change the tab when the input radio is :checked.

Here you can find the code and a image of what I am trying of achieve.

I would really appreciate any help.

Thank you very much.

Best reagards Erika

/* tabs input and label */
.tabs-wrapper {
  margin-bottom: 35px;
  overflow: hidden;

  .tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    &.tab {
      margin-right: 4px;
      margin-bottom: 12px;
      color: white;
      text-align: center;
      user-select: none;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

/* second separate div where the tab-content are */
.product-main-body-wrapper {
  .product-body {
    width: 100%;

    .tab-content {
      display: none;
    }
  }
}

/* make panel tab-content appear */
.tabs-wrapper
  .tabs-nav
  #tab-1:checked
  ~ .product-main-body-wrapper
  .product-body
  #Tab1,
.tabs-wrapper
  .tabs-nav
  #tab-2:checked
  ~ .product-main-body-wrapper
  .product-body
  #Tab2 {
  display: block;
}

.radio {
  display: none;
}
/* change color of tab label */
#tab-1:checked ~ .tabs #one-tab,
#tab-2:checked ~ .tabs #two-tab {
  background: red;
  color: white;
}

<div class="tabs-wrapper">

  <nav class="tabs-nav">
  
    <input type="radio" class="radio" id="tab-1" name="tab-control" checked>
    <input type="radio" class="radio" id="tab-2" name="tab-control">
    
    <div class="tabs">
      <label for="tab-1" id="one-tab" class="tab btn-secondary">Tab one</label>
      <label for="tab-2" id="two-tab" class="tab btn-secondary">Tab two</label>
    </div>
    
  </nav>
  
</div>



<div class="product-main-body-wrapper">

  <div class="product-body">
  
    <div id="Tab1" class="tab-content">
      <article>
        <p> panel one </p>
      </article>
    </div>
    
    <div id="Tab2" class="tab-content">
      <article> panel two</article>
    </div>
    
  </div>
  
</div>

Please have a look at this answer, it might help.

Cristian Sarghe
– Cristian Sarghe

2021-01-18 19:21:19 +00:00
Commented Jan 18, 2021 at 19:21 — Cristian Sarghe
– Cristian Sarghe, Commented Jan 18, 2021 at 19:21

theCoder · Accepted Answer · 2021-01-18 19:21:30Z

Have a look at this page.

Code (c) copyright css tricks

<html><head>
<meta charset="UTF-8">
<title>CSS Tabs</title>
<style>
        * { margin: 0; padding: 0; }
        #page-wrap { width: 960px; margin: 100px auto; }
        h1 { font: 36px Georgia, Serif; margin: 20px 0; }
        .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
        p { margin: 0 0 10px 0; }
        
        .tabs { list-style: none; }
        .tabs li { display: inline; }
        .tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
        .tabs li a:hover { background: #ccc; }
        
        
        /* Generic styles & example one */
        
        .tabbed-area { margin: 0 0 120px 0; }
        .box-wrap { position: relative; min-height: 250px; }
        .tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
        .tabbed-area div div, .tabs li a { border: 1px solid #ccc; }
        #box-one:target, #box-two:target, #box-three:target { z-index: 1; }
        
        
        
        /* Stuff for example two */
        
        .cur-nav-fix { margin-top: 60px; }
        .cur-nav-fix .tabs { position: absolute; bottom: 100%; left: -1px; }
        .cur-nav-fix .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
        #box-four { z-index: 1; }
        #box-four:target .tabs,
        #box-five:target .tabs,
        #box-six:target .tabs { z-index: 3; }
        #box-four:target, #box-five:target, #box-six:target { z-index: 2; }
        .cur-nav-fix .tabs li.cur a { border-bottom: 1px solid white; background: white; }
        
        
        /* Stuff for example three */
        
        .cur-nav-fix-2 .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
        .cur-nav-fix-2 .tabs { z-index: 2; position: relative; }
        #box-seven:target .box-seven,
        #box-eight:target .box-eight,
        #box-nine:target .box-nine { z-index: 1; }
        #box-seven:target a[href="#box-seven"],
        #box-eight:target a[href="#box-eight"],
        #box-nine:target a[href="#box-nine"] { border-bottom: 1px solid white; background: white; }
        
        
        /* Stuff for example four */
        
        .active-test { padding-top: 40px; }
        .active-test .single-tab em { background: white; width: 50px; font-style: normal; position: absolute; bottom: 100%; text-decoration: none; color: black; border: 1px solid #ccc; padding: 5px 10px; }
        .active-test .single-tab span { position: absolute; top: -1px; left: 0; width: 100%; display: block; padding: 20px; border: 1px solid #ccc; min-height: 250px; background: white; }
        .active-test .single-tab:active em { background: #ccc; }
        .active-test .single-tab:active span, .active-test .single-tab:focus span { z-index: 1; }
        .tab-ten em { left: 0; }
        .tab-eleven em { left: 70px; }
        .tab-twelve em { left: 140px; }
        
        
        /* Stuff for example five */
        
        .adjacent { position: relative; margin-top: 50px; min-height: 300px; }
        .adjacent div { border: 1px solid #ccc; background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
        .adjacent .tabs { position: absolute; bottom: 100%; left: 0; z-index: 2; }
        .adjacent .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
        #box-thirteen:target,
        #box-fourteen:target,
        #box-fifteen:target { z-index: 1; }
        #box-thirteen:target ~ .tabs a[href='#box-thirteen'],
        #box-fourteen:target ~ .tabs a[href='#box-fourteen'],
        #box-fifteen:target ~ .tabs a[href='#box-fifteen'] { background: white; border-bottom: 1px solid white; }


        /* Stuff for example six */

        .w3c { min-height: 250px; position: relative; width: 100%; }
        .w3c > div { display: inline; }
        .w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
        .w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }   
        .w3c > div:target > a { background: white; }    
        .w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }    
        .w3c > div:not(:target) > div { position: absolute }
        .w3c > div:target > div { position: absolute; z-index: -1; }
        
        
        /* Stuff for example seven - including conditionals below */
        
        #ie-test { position: relative; width: 100%; }
        #boxLinks { list-style: none; overflow: hidden; }
        #boxLinks li {  display: inline; }
        #boxLinks li a { padding: 5px 10px; color: black; text-decoration: none; border: 1px solid #ccc; float: left; display: block; margin-left: -1px; position: relative; left: 1px; }
        #boxLinks li a:hover { color: #fff; background: #000; }
        #box { height: 250px; border: 1px solid #ccc; overflow: hidden; padding: 0px 30px 0px 30px; position: relative; top: -1px; }
        .box { display: none; height: 250px; overflow: auto; display: block; position: relative; overflow-x: hidden; }
        #box1:target, #box2:target, #box3:target { display: block; }

    </style>
<!--[if IE]>
    <style type="text/css">
        .box { display: block; }
        #box { overflow: hidden;position: relative; }
        b { position: absolute; top: 0px; right: 0px; width:1px; height: 251px; overflow: hidden; text-indent: -9999px; }
    </style>
    <![endif]-->
</head>
<body>
<div id="demo-top-bar">
<div id="demo-bar-inside">
<h2 id="demo-bar-badge">
<a href="/">CSS-Tricks Example</a>
</h2>
<div id="demo-bar-buttons">
<a class="header-button" href="/5841-css3-tabs/">← Back to Article</a> </div>
</div>
</div>
<div id="page-wrap">
<div style="width: 420px; float: left;">
<h1>Example One</h1>
<p>Grade: C</p>
<p>From an HTML perspective, this is the absolute cleanest. It just doesn't deal with current
navigation highlighting.</p>
<div class="tabbed-area">
<ul class="tabs group">
<li><a href="#box-one">Tab 1</a></li>
<li><a href="#box-two">Tab 2</a></li>
<li><a href="#box-three">Tab 3</a></li>
</ul>
<div class="box-wrap">
<div id="box-one">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="box-two">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 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 non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="box-three">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
 <h1>Example Three</h1>
<p>Grade: B</p>
<p>This has current navigation highlighting. The only downside is that it requires as
many wrapping divs as there are panels.</p>
<div id="box-seven"><div id="box-eight"><div id="box-nine">
<div class="tabbed-area cur-nav-fix-2">
<ul class="tabs group">
<li><a href="#box-seven">Tab 7</a></li>
<li><a href="#box-eight">Tab 8</a></li>
<li><a href="#box-nine">Tab 9</a></li>
</ul>
<div class="box-wrap">
<div class="box-seven">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="box-eight">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 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 non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="box-nine">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</div></div></div>
<h1>Example Five</h1>
<p>Grade: B</p>
<p>This is handles current navigation highlighting, with pretty clean HTML. The only downside is
that the list for the tab navigation comes <em>after</em> the panels.</p>
<div class="tabbed-area adjacent">
<div id="box-thirteen">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="box-fourteen">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 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 non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="box-fifteen">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<ul class="tabs group">
 <li><a href="#box-thirteen">Tab 13</a></li>
<li><a href="#box-fourteen">Tab 14</a></li>
<li><a href="#box-fifteen">Tab 15</a></li>
</ul>
</div>
<h1>Example Seven</h1>
<p>Grade: Depends</p>
<p>This example is the only one that works in IE 7+, so that's big bonus points.</p>
<div id="ie-test">
<ul id="boxLinks" class="group">
<li><a href="#box1">Tab 19</a></li>
<li><a href="#box2">Tab 20</a></li>
<li><a href="#box3">Tab 21</a></li>
</ul>
<div id="box">
<div id="box1" class="box">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<!--[if IE]><b>.</b><![endif]-->
</div>
<div id="box2" class="box">Another box! <!--[if IE]><b>.</b><![endif]--></div>
<div id="box3" class="box">Woot! <!--[if IE]><b>.</b><![endif]--></div>
</div>
</div>
</div>
<div style="width: 420px; float: right;">
<h1>Example Two</h1>
<p>Grade: D</p>
<p>This fixes the current navigation problem, but requires the menu to be repeated inside
of each panel, which is pretty unacceptable. The hash-links also jump to the panel themselves,
which cuts off the actual tabs if there is enough page scroll below the panels.</p>
<div class="tabbed-area cur-nav-fix">
<div class="box-wrap">
<div id="box-four">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="tabs group">
<li class="cur"><a href="#box-four">Tab 4</a></li>
<li><a href="#box-five">Tab 5</a></li>
<li><a href="#box-six">Tab 6</a></li>
</ul>
</div>
<div id="box-five">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 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 non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<ul class="tabs group">
<li><a href="#box-four">Tab 4</a></li>
<li class="cur"><a href="#box-five">Tab 5</a></li>
<li><a href="#box-six">Tab 6</a></li>
</ul>
</div>
<div id="box-six">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<ul class="tabs group">
<li><a href="#box-four">Tab 4</a></li>
<li><a href="#box-five">Tab 5</a></li>
 <li class="cur"><a href="#box-six">Tab 6</a></li>
</ul>
</div>
</div>
</div>
<h1>Example Four</h1>
<p>Grade: F</p>
<p>This was an attempt at using the :active and :focus states instead of using :target.
This would have made it even IE 6 compatible. It works as you click, but I haven't been
able to get the link to keep it's focus or active state after the click. Plus, all the
content is inside the anchor link which is sketchy at best.</p>
<div class="tabbed-area active-test">
<div class="box-wrap">
<a class="single-tab tab-ten" href="#box-ten">
<em>Tab 10</em>
<span id="box-ten">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</span>
</a>
<a class="single-tab tab-eleven" href="#box-ten">
<em>Tab 11</em>
<span id="box-eleven">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 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 non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</span>
</a>
<a class="single-tab tab-twelve" href="#box-ten">
<em>Tab 12</em>
<span id="box-twelve">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</span>
</a>
</div>
</div>
<h1>Example Six</h1>
<p>Grade: A</p>
<p>This is the winner so far. It is infinitely expandable (no selectors specific to panels) and the markup is pretty clean.
Possible issues: cross-browser line height issues possibly not making perfect layout, links are placed right above each
div instead of a in central list at the top.</p>
<div class="w3c">
<div id="tab16">
<a href="#tab16">Tab 16</a>
<div>One might well argue, that...</div>
</div>
<div id="tab17">
<a href="#tab17">Tab 17</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
<a href="#tab18">Tab 18</a>
<div>... that 2 should have been enough, but...</div>
</div>
</div>
</div>
</div>
<style type="text/css" style="display: none !important;">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        overflow-x: hidden;
    }
    #demo-top-bar {
        text-align: left;
        background: #222;
        position: relative;
        zoom: 1;
        width: 100% !important;
        z-index: 6000;
        padding: 20px 0 20px;
    }
    #demo-bar-inside {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    #demo-bar-buttons {
        padding-top: 10px;
        float: right;
    }
    #demo-bar-buttons a {
        font-size: 12px;
        margin-left: 20px;
        color: white;
        margin: 2px 0;
        text-decoration: none;
        font: 14px "Lucida Grande", Sans-Serif !important;
    }
    #demo-bar-buttons a:hover,
    #demo-bar-buttons a:focus {
        text-decoration: underline;
    }
    #demo-bar-badge {
        display: inline-block;
        width: 302px;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    #demo-bar-badge a {
        display: block;
        width: 100%;
        height: 38px;
        border-radius: 0;
        bottom: auto;
        margin: 0;
        background: url(/images/examples-logo.png) no-repeat;
        background-size: 100%;
        overflow: hidden;
        text-indent: -9999px;
    }
    #demo-bar-badge:before, #demo-bar-badge:after {
        display: none !important;
    }
</style>

</body></html>

Thank you for the answer. I got now to the point where by clicking on different voices it goes to the relevant section but I am still struggling with the fact that all the content is displayed. I must find a way to show the content only relevant to the selected tab

Collectives™ on Stack Overflow

CSS tab system with input radio (no js)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related