Как реализовать два набора вкладок CSS на одной странице?

Question

Я пытаюсь реализовать два набора групп вкладок только для CSS на одной странице. Однако, когда я нажимаю на определенные вкладки в одной группе, активируются и другие вкладки. Вот мой код ниже. Я хочу, чтобы на странице было добавлено столько групп вкладок css.

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> 

устанавливаемыми сотовыми

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

Вместо того, чтобы использовать :target селектор, используйте :checked селектор и обернуть section элементы в ярлыке радиоэлементов.

JSFIDDLE (Обновлен пример)

Делая так, вы можете иметь столько же отдельных групп, как это возможно, и также без использования JavaScript.

HTML Структура

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