CODEWITHSUNDEEP
htmlcss
user8122410
user8122410

Reputation: 3

HTML and CSS radio tabs issue

okay, i made a website for my work. It's just for his ebay site seeing as ebay will no longer support javascript. I made a set of (seven) tabs composed entirely of html and css. they work fine but the problem im having is none of the tabs actually are open and display upon the inital opening of the webpage. He'd like tab-1 open when the webpage opens to display item information without the user having to open it manually. here's an example of my html for it. 

<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1">
<label for="tab-1"><span style="cursor:pointer" class=:"tab-switch">tab-1 name</span></label>

<div class="content">
<p>tab-1 info</p>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2"><span style="cursor:pointer">tab-2 name</span></label>

<div class="content">
<p>tab-2 info</p>
</div>
</div>

this is the basic format that i created my radio tabs with. I'm just curious now on what i can do to make tab-1 open by default. i assume maybe a pseudo-class or something of the sort. Keep in mind I am avoiding the use of javascript in any form.

Upvotes: 0

Views: 87

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

Set the checked attribute on the input you want to be selected by default.

input:checked ~ .content {
  display: block;
}
.content, input {
  display: none;
}
<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1"><span style="cursor:pointer" class=:"tab-switch">tab-1 name</span></label>

    <div class="content">
      <p>tab-1 info</p>
    </div>
  </div>

  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2"><span style="cursor:pointer">tab-2 name</span></label>

    <div class="content">
      <p>tab-2 info</p>
    </div>
  </div>

Upvotes: 1

Related Questions