How to implement two sets of CSS Tabs on one page? - html

Question

I am trying to implement two sets of CSS-only tab groups on one page. However, when I click on certain tabs in one group, other tabs become active also. Here is my code below. I want to be able to put as many css tab groups on a page.
The html
<div class="row">
<article class="tabs">
<section id="tab2" class="tab_block">
<h2>Tab 2</h2>
<div>
<p>This content appears on tab 2.</p>
</div>
</section>
<section id="tab3" class="tab_block">
<h2>Tab 3</h2>
<div>
<p>This content appears on tab 3.</p>
<p>Some more content...</p>
</div>
</section>
<section id="tab1" class="tab_block">
<h2>Tab 1</h2>
<div>
<p>This content appears on tab 1.</p>
<p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
<p>Some more content...</p>
</div>
</section>
</article>
</div>
<div class="row">
<article class="tabs">
<section id="tab5" class="tab_block">
<h2>Tab 2</h2>
<div>
<p>This content appears on tab 2.</p>
</div>
</section>
<section id="tab6" class="tab_block">
<h2>Tab 3</h2>
<div>
<p>This content appears on tab 3.</p>
<p>Some more content...</p>
</div>
</section>
<section id="tab4" class="tab_block">
<h2>Tab 1</h2>
<div>
<p>This content appears on tab 1.</p>
<p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
<p>Some more content...</p>
</div>
</section>
</article>
</div>
The css
body {
font: 62.5%/1.5 Georgia,serif;
margin: 10em 0 0;
}
h2 {
font-size: 2em;
}
p {
font-size: 1.6em;
}
.row {
width: 100%;
float: left;
position: relative;
height: 256px;
}
.tabs {
display: block;
margin: 0 auto;
position: relative;
width: 40em;
}
.tab_block {
position: absolute;
}
.tab_block h2 {
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
left: -1em;
margin: 0;
padding: 0;
position: relative;
top: -2.7em;
width: 6em;
}
.tab_block:first-child h2 {
left: 5.3em;
}
.tab_block:nth-child(2) h2 {
left: 11.6em;
}
.tab_block h2 a {
color: #000;
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 100%;
}
.tab_block div {
box-sizing: border-box;
margin: -5.4em 0 0 -2.1em;
height: 0;
overflow: hidden;
visibilty: hidden;
width: 0;
}
/* last in HTML markup, but visually shown first */
.tab_block:last-child {
background: #FFF;
}
.tab_block:last-child h2 {
background: #FFF;
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
left: -1.05em;
}
.tab_block:last-child h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:last-child div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;height: auto;
overflow: visible;
visibilty: visible;
width: 40em;
}
.tab_block:target,
.tab_block:target h2 {
background-color: #FFF;
}
.tab_block:target h2 {
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
}
.tab_block:target h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:target ~ .tab_block:last-child h2 {
background: #DDD;
border: 0;
box-shadow: none;
left: -1em;
}
.tab_block:target ~ .tab_block:last-child h2:after {
border-bottom: 0;
}
.tab_block:target div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;
height: auto;
visibilty: visible;
width: 40em;
}
.tab_block:target ~ .tab_block div {
border: 0;
box-shadow: none;
height: 0;
overflow: hidden;
padding: 0;
visibilty: hidden;
width: 0;
}
.tab_block h2 {
transition: all 500ms ease;
}

Answer 1

Instead of using :target selector, use :checked selector and wrap your section elements in label of radio elements.
JSFIDDLE (Updated example)
Doing like this, you can have as many individual groups as possible and also without using javascript.
HTML Structure
-- row
-- tabs
-- input (same group)
-- label
-- section
-- input (same group)
-- label
-- section
-- input (same group)
-- label
-- section
CSS
body, html {
margin: 0px;
padding: 0px;
}
body {
font: 62.5%/1.5 Georgia, serif;
margin: 10em 0 0;
}
h2 {
font-size: 2em;
}
p {
font-size: 1.6em;
}
input[type=radio] {
position: absolute;
visibility: hidden;
pointer-events: none;
z-index: 1;
}
.clear-float {
clear: both;
}
.tab_block ~ .tab_block h2 {
left: 50%;
transform: translate(-50%, -100%);
}
.tab_block ~ .tab_block ~ .tab_block h2 {
left: auto;
right: 0px;
transform: translate(0%, -100%);
}
.row {
width: 40em;
margin: 0 auto;
position: relative;
margin-top: 5em;
}
.tab_block div {
display: none;
background-color: white;
box-sizing: border-box;
overflow: hidden;
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
padding: 1em 2em;
width: 40em;
}
.tab_block h2 {
position: absolute;
top: 1px;
transform: translateY(-100%);
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
margin: 0;
padding: 0;
width: 6em;
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
transition: all 500ms ease;
text-align: center;
cursor: pointer;
border-bottom: none;
}
.tab_block:last-child div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
padding: 1em 2em;
height: auto;
overflow: visible;
visibilty: visible;
width: 40em;
}
input[type=radio]:checked + label h2 {
background-color: white;
}
:checked + label div {
display: block;
}