Using 2 tabbed content sections on one page

Question

I want to have 2 tabbed sections on one page. Because I am using SquareSpace, these two sections need to share a CSS file. The problem I am having is that the two sections cannot have a tab open at the same time.

I tried: 1) Adding classes to the sections then targeting those sections separately with CSS; and 2) Changing the numbers of the tabs and content on the second form to 5,6,7,8,9 instead of repeating the same numbers as in the first form. This worked except that I need the content in the first sections to be checked as a default.

Thanks for your help!

HTML (this is essentially the same form, copied and pasted twice):

 <main class="all_tabbed_only">

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Text</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Media</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Games</label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Services</label>

    <input id="tab5" type="radio" name="tabs">
  <label for="tab5">Data</label>

  <section id="content1">

<h3>Micro Purchase with Later Payment </h3>
    <br>

    <p>Sell all kinds of text</p>
<ul class="tabbed-list">

<li>Low entry barrier for users</li>
<li>Aggregation of purchases across multiple sellers</li>
<li>Payment only when reaching an invoice total of 5 Euro</li>
<li>Reduction of transaction costs</li>
<li>Flexible pricing between 0.05 and 5.00 Euro</li> </ul>

  </section>

  <section id="content2">

 <h3>Time Limited Flatrate Access</h3>

<p>Time Passes grant users full access to a certain amount of content for a limited time. Scope and validity period of the Time Passes can freely be set. Time Passes do not renew automatically, but can be renewed by their user with just two clicks. </p>
<ul class="tabbed-list">
<li>Flexible scope and validity period</li>
<li>No automatic renewal</li>
<li>Easy two-click renewal</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>
    </ul>   
  </section>

  <section id="content3">

      <h3>Single Item Purchase with Direct Payment</h3>

    <p>Single Sale allows to sell higher priced content for 1.49 to 149.99 Euro. Users log in with their LaterPay account or register one and gain access to their purchases immediately after paying.</p>

<ul class="tabbed-list">
<li>Immediate payment</li>
<li>Immediate access to purchase</li>
<li>Flexible pricing between 1.49 and 149.99 Euro</li>
    </ul>
  </section>

  <section id="content4">

<h3>Premium Complementary Content</h3>

<p>LaterPay allows to monetize complementary content for free content. Users can thus pay for further information and services that complements a free piece of content. We call it “Free-to-Read”: Reading is free, complementary content is available for a fee. </p>

<ul class="tabbed-list">
  <li>Monetization of complementary content</li>
<li>Unrestricted access to main content</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>

  </section>
    <section id="content5">

<h3>Data</h3>

<p>Sell data </p>

<ul class="tabbed-list">
  <li>Monetization of complementary content</li>
<li>Unrestricted access to main content</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>

  </section>

</main>

      <main class="all_tabbed_only">

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Pay-Per-Use</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Time Pass</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Single Sale</label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Free to Read</label>

  <section id="content1">

<h3>Micro Purchase with Later Payment </h3>
    <br>

  <p>Use first and pay later. Pay-per-Use lets you buy with only two clicks and gives immediate access to the purchase.
Advance registration is not required. You only have to pay when reaching an invoice total of 5 Euro across multiple sellers.
Small prices lower the barrier to entry for paying for content. At the same time the collective invoice lowers the transaction costs and enables selling content at a profit for as little as 5 cent.</p>

<ul class="tabbed-list">

<li>Low entry barrier for users</li>
<li>Aggregation of purchases across multiple sellers</li>
<li>Payment only when reaching an invoice total of 5 Euro</li>
<li>Reduction of transaction costs</li>
<li>Flexible pricing between 0.05 and 5.00 Euro</li> </ul>

  </section>

  <section id="content2">

 <h3>Time Limited Flatrate Access</h3>

<p>Time Passes grant users full access to a certain amount of content for a limited time. Scope and validity period of the Time Passes can freely be set. Time Passes do not renew automatically, but can be renewed by their user with just two clicks. </p>
<ul class="tabbed-list">
<li>Flexible scope and validity period</li>
<li>No automatic renewal</li>
<li>Easy two-click renewal</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>
    </ul>   
  </section>

  <section id="content3">

      <h3>Single Item Purchase with Direct Payment</h3>

    <p>Single Sale allows to sell higher priced content for 1.49 to 149.99 Euro. Users log in with their account or register one and gain access to their purchases immediately after paying.</p>

<ul class="tabbed-list">
<li>Immediate payment</li>
<li>Immediate access to purchase</li>
<li>Flexible pricing between 1.49 and 149.99 Euro</li>
    </ul>
  </section>

  <section id="content4">

<h3>Premium Complementary Content</h3>

<p>This allows to monetize complementary content for free content. Users can thus pay for further information and services that complements a free piece of content. We call it “Free-to-Read”: Reading is free, complementary content is available for a fee. </p>

<ul class="tabbed-list">
  <li>Monetization of complementary content</li>
<li>Unrestricted access to main content</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>

  </section>

</main>

And here's the CSS:

<style>@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

.tabbed-list {
 margin-left: 5%; 
}
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #eee;
}
/*
h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}
*/
p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16b'; }
label[for*='4']:before { content: '\f1a9'; }

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

input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 3px solid #765743;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5


{
  display: block;
}

li:before {
font-family: 'squarespace-ui-font'; 
font-style: normal; 
font-weight: normal; 
-webkit-font-smoothing: antialiased; 
display: inline-block; 
vertical-align: middle; 
speak: none; 
content: "\e019";
  margin-right:5px;
}

li {list-style-type: none;}

@media screen and (max-width: 650px) {
 /* label {
    font-size: 0;
  } */
  label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}
  </style>

Answer 1

The errors I've found in your code:

• Each group of radiobuttons must have a different name.
• IDs must not be repeated within the same HTML page.

Naming the second group of radios differently from the first, and changing also the IDs of the INPUTs and DIVs of the second main, I've got it working.