1

I have some tabs that are using only HTML and CSS. I would, however, like to add subtabs within those tabs. i.e. When I got to Tab one, I find another set of tabs inside. I only know how to do this using Javascript but I would prefer if this whole setup remains purely on HTML CSS.

Is this possible and how do I go about that?

Below is my working code for the first tabs.

@import url('https://fonts.googleapis.com/css? 
 family=Open+Sans:400,
600,
700');
 * {
  margin: 0;
  padding: 0;
}

body {
  padding: 20px;
  background: white;
}

.tabinator {
  background: white;
  font-family: Open Sans;
  height: 500px;
  width: 100%;
}

.tabinator h2 {
  text-align: center;
  margin-bottom: 20px;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 15px 25px;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -11px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: #888;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: #000;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
}

.tabinator input:checked+label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 15px #939393;
}

#box1,
#box2,
#box3,
#box4 {
  display: none;
  border-top: 1px solid #bbb;
  padding: 15px;
}

#tab1:checked~#box1,
#tab2:checked~#box2,
#tab3:checked~#box3,
#tab4:checked~#box4 {
  display: block;
  box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
  <h2>CSS Tabs</h2>
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab One</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab Two</label>
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tab Three</label>
  <input type="radio" id="tab4" name="tabs">
  <label for="tab4">Tab Four</label>
  <div id="box1">
    <p>
      Peace to all worlds
    </p>
  </div>
  <div id="box2">
    <p>
      peace to all worlds 2
    </p>
  </div>
  <div id="box3">
    <p>
      peace to all worlds 3
    </p>
  </div>
  <div id="box4">
    <p>
      peace to all worlds 4
    </p>
  </div>
</div>

Improve this question
1
  • 2
    your example isn't working. Commented Jun 24, 2019 at 6:46

4 Answers 4

Reset to default
3

I use something similar to the following. You don't need extra ids with numbers in your CSS

.tabbed {
  display: flex;
  flex-wrap: wrap;
}
.tabbed > input {
  display: none;
}
.tabbed > input:checked + label {
  background-color: silver;
}
.tabbed > input:checked + label + div {
  display: block;
}
.tabbed > label {
  order: 1;
  flex-grow: 1;
  padding: 10px;
}
.tabbed > div {
  order: 2;
  flex-basis: 100%;
  display: none;
  padding: 10px;
}

/* For presentation only */
.container {
  width: 600px;
  margin: 0 auto;
  background-color: gold;
}

.tabbed {
  border: 1px solid;
}

hr {
  background-color: white;
  height: 5px;
  border: 0;
  margin: 10px 0 0;
}
hr + * {
  margin-top: 10px;
}
hr + hr {
  margin: 0 0;
}
<div class="container">
  <div class="tabbed">
    <input type="radio" id="tabbed-tab-1-1" name="tabbed-tab-1" checked><label for="tabbed-tab-1-1">Tab 1</label>
    <div>
      <div class="tabbed">
        <input type="radio" id="tabbed-tab-1-1-1" name="tabbed-tab-1-1" checked><label for="tabbed-tab-1-1-1">Tab 1</label>
        <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vitae nulla unde nobis accusamus voluptate porro optio ut enim explicabo et, quasi qui neque laudantium hic! Molestias reprehenderit qui, tempora, ipsum quod sit officiis maxime reiciendis cumque vero repellendus, sunt doloremque? Culpa asperiores tenetur, vero optio vel dolores voluptas voluptate.</p></div>
        <input type="radio" id="tabbed-tab-1-1-2" name="tabbed-tab-1-1"><label for="tabbed-tab-1-1-2">Tab 2</label>
        <div><p>Nobis repudiandae et atque facilis delectus, eligendi molestias beatae recusandae est perferendis illum officia ullam labore, iste tempore quidem unde consequatur exercitationem animi! Accusamus ab vero maiores eaque, animi possimus aliquam repellendus corrupti et! Quaerat nihil inventore velit nisi. Assumenda maxime dolorum saepe itaque dolores rerum dolore nostrum, fuga omnis!</p></div>
      </div>
    <hr>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam minus praesentium perferendis in nemo odit voluptate quo labore dicta consequuntur commodi beatae facere vitae quod cum impedit tempora qui ipsam perspiciatis recusandae numquam, illum facilis soluta! Nihil neque repudiandae ipsa minus illum, ea dolores beatae necessitatibus dolor at modi? Accusamus.</p></div>
    <input type="radio" id="tabbed-tab-1-2" name="tabbed-tab-1"><label for="tabbed-tab-1-2">Tab 2</label>
    <div><p>Tempore odit asperiores, corrupti nulla repellat laudantium deserunt natus optio culpa quibusdam beatae dolorum? Laboriosam repudiandae id iusto eveniet, animi cupiditate aperiam perferendis! Aperiam, soluta architecto distinctio cupiditate dolores, quisquam ab magni quae non praesentium quia veritatis, rerum inventore adipisci. Quis minus eius, voluptas cum animi totam nesciunt alias eaque!</p></div>
    <input type="radio" id="tabbed-tab-1-3" name="tabbed-tab-1"><label for="tabbed-tab-1-3">Tab 3</label>
    <div><p>Reiciendis beatae odio doloribus nobis ab ut, qui animi expedita quaerat quisquam sapiente dolores laudantium numquam consequatur impedit quos debitis eos asperiores eaque sunt delectus iure nisi perferendis? Id nostrum magni repellat animi aliquam aspernatur dolores fugit aut nobis dolorem, saepe aliquid vitae, ipsa est perferendis ducimus? Qui, facere obcaecati.</p></div>
  </div>

  <hr><hr>

  <div class="tabbed">
    <input type="radio" id="tabbed-tab-2-1" name="tabbed-tab-2" checked><label for="tabbed-tab-2-1">Tab 1</label>
    <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam commodi aut accusantium nulla ex delectus? Consectetur velit eum corrupti vel molestias corporis non perferendis? Ratione, dicta. Repudiandae, illum officia! Fugit, distinctio corporis labore nam laborum consectetur minima facere enim quis error fuga adipisci ducimus molestiae officiis beatae odio ad consequatur!</p></div>
    <input type="radio" id="tabbed-tab-2-2" name="tabbed-tab-2"><label for="tabbed-tab-2-2">Tab 2</label>
    <div><p>Vero ad temporibus ipsam commodi accusantium necessitatibus, dicta ea ullam, similique itaque doloribus id eos nisi porro dolores modi excepturi! Perferendis assumenda nisi, dolores hic laudantium facere. Minima autem explicabo exercitationem harum illo blanditiis quaerat vel voluptatem voluptate ducimus sequi repudiandae, beatae dolore eum corporis deserunt reprehenderit rem adipisci accusantium.</p></div>
    <input type="radio" id="tabbed-tab-2-3" name="tabbed-tab-2"><label for="tabbed-tab-2-3">Tab 3</label>
    <div><p>Totam, temporibus. Totam labore velit repellendus excepturi dolor asperiores, aut tenetur esse quas distinctio molestias at, perferendis odit architecto officia tempora nihil nobis ullam? Labore, earum. Ratione sit quaerat eligendi eum numquam commodi officiis dolore assumenda doloribus amet. Magni tempore culpa quae velit ex animi veniam pariatur sequi, ab reprehenderit.</p></div>
    <input type="radio" id="tabbed-tab-2-4" name="tabbed-tab-2"><label for="tabbed-tab-2-4">Tab 3</label>
    <div><p>Totam, temporibus. Totam labore velit repellendus excepturi dolor asperiores, aut tenetur esse quas distinctio molestias at, perferendis odit architecto officia tempora nihil nobis ullam? Labore, earum. Ratione sit quaerat eligendi eum numquam commodi officiis dolore assumenda doloribus amet. Magni tempore culpa quae velit ex animi veniam pariatur sequi, ab reprehenderit.</p></div>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

This solution is using with pure css. You can simplify your code as followed. 

.tabs {
  position: relative;
  clear: both;
}

.tabs .tab {
  float: left;
}

.tabs .tab .content {
  position: absolute;
  background-color: white;
  left: 0px;
  width: 100%;
}

.tab label {
  margin-right: 10px;
}

.checkboxtab:checked~.content {
  z-index: 1;
}
<div class="tabinator">
  <h2>CSS Tabs</h2>

  <div class="tabs">
    <div class="tab">
      <input name="checkbox-tabs-group" type="radio" id="checkbox1" class="checkboxtab" checked>
      <label for="checkbox1">Tab One</label>
      <div class="content">
        Peace to all worlds 1
      </div>
    </div>

    <div class="tab">
      <input name="checkbox-tabs-group" type="radio" id="checkbox2" class="checkboxtab">
      <label for="checkbox2">Tab Two</label>
      <div class="content">
        peace to all worlds 2
      </div>
    </div>

    <div class="tab">
      <input name="checkbox-tabs-group" type="radio" id="checkbox3" class="checkboxtab">
      <label for="checkbox3">Tab Three</label>
      <div class="content">
        peace to all worlds 3
      </div>
    </div>
  </div>

Improve this answer

1 Comment

This doesn't directly solve OP's problem for sub-tabs. However, they can extend a similar approach for the same.
1

I'm not sure this is what you are after, but I created sub tabs for the first two tabs, using HTML and CSS only.

/*
  When level 1 tab is not selected, hide sub tabs
*/

#tab1:not(:checked)~#sub1,
#tab2:not(:checked)~#sub2 {
  display: none;
}


/*
  When level 1 tab is selected, display relevant sub tabs
*/

#tab1:checked~#sub1,
#tab2:checked~#sub2 {
  display: inline-block;
}
<div class="tabinator">
  <h2>CSS Tabs</h2>
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab One</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab Two</label>
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tab Three</label>
  <input type="radio" id="tab4" name="tabs">
  <label for="tab4">Tab Four</label>
  <br>
  <div id="sub1">
    <input type="radio" id="sub1tab1" name="sub1tabs">
    <label for="sub1tab1">Sub 1 Tab One</label>
    <input type="radio" id="sub1tab2" name="sub1tabs">
    <label for="sub1tab2">Sub 1 Tab Two</label>
  </div>
  <div id="sub2">
    <input type="radio" id="sub2tab1" name="sub2tabs">
    <label for="sub2tab1">Sub 2 Tab One</label>
    <input type="radio" id="sub2tab2" name="sub2tabs">
    <label for="sub2tab2">Sub 2 Tab Two</label>
  </div>
  <div id="box1">
    <p>
      Peace to all worlds
    </p>
  </div>
  <div id="box2">
    <p>
      peace to all worlds 2
    </p>
  </div>
  <div id="box3">
    <p>
      peace to all worlds 3
    </p>
  </div>
  <div id="box4">
    <p>
      peace to all worlds 4
    </p>
  </div>
</div>

Improve this answer

Comments

1

Using the following code, you can implement the multi tab without using javascript : 

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}
<main>
  
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Codepen</label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Dribbble</label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Stack Overflow</label>

  <section id="content1">
    <p>
     test1
    </p>
  </section>
  <section id="content2">
    <p>
  test2
    </p>
  </section>
  <section id="content3">
    <p>
     test3
    </p>
  </section>
</main>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.