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

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><a href="#tab2">Tab 2</a></h2>
            <div>
                <p>This content appears on tab 2.</p>
            </div>
        </section>
        <section id="tab3" class="tab_block">
            <h2><a href="#tab3">Tab 3</a></h2>
            <div>
                <p>This content appears on tab 3.</p>
                <p>Some more content...</p>
            </div>
        </section>
        <section id="tab1" class="tab_block">
            <h2><a href="#tab1">Tab 1</a></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><a href="#tab5">Tab 2</a></h2>
            <div>
                <p>This content appears on tab 2.</p>
            </div>
        </section>
        <section id="tab6" class="tab_block">
            <h2><a href="#tab6">Tab 3</a></h2>
            <div>
                <p>This content appears on tab 3.</p>
                <p>Some more content...</p>
            </div>
        </section>
        <section id="tab4" class="tab_block">
            <h2><a href="#tab4">Tab 1</a></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;
}

I think I understand. the problem is that only one target can be active on a page. not more than one. — Mr_Green
– Mr_Green, Commented Oct 10, 2014 at 7:31

Mr_Green · Accepted Answer · 2014-10-10 12:52:27Z

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;
}

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related