pure css html tabs the click does not change

Question

I created these cards in pure css and html I don't want to use javascript, but I don't understand why it doesn't work for me can you help me solve this problem of mine? thank you

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
  order: 1;
  firstdisplay: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #f9f9f9;
  font-weight: bold;
  transition: background ease 0.2s;
  border-radius: 15px
}

.tabs .tab {
  order: 99;
  astflex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked+label {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
}

.tabs input[type="radio"]:checked+label+.tab {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

.tabp {
  line-height: 25px;
  text-align: left;
  padding: 5px;
  font-size: 15px;
}

```

<div class="col-lg-12">
  <div class="product__details__tab">
    <ul class="nav nav-tabs tabs">
      <li class="nav-item">
        <input type="radio" name="tabs" id="tabone" checked="checked">
        <label for="tabone">Tabella Uno</label>
      </li>
      <li class="nav-item">
        <input type="radio" name="tabs" id="tabtwo">
        <label for="tabtwo">Tabella Due</label>
      </li>
      <li class="nav-item">
        <input type="radio" name="tabs" id="tabthree">
        <label for="tabthree">Tab Tre</label>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane tab active" id="tabone">
        <h6>Description</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabtwo">
        <h6>Specification</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabthree">
        <h6>Reviews ( 2 )</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

Nikola Pavicevic · Accepted Answer · 2021-08-16 14:33:27Z

You need to put radio inputs above tabs (you can hide them), so you can select tabs, also use id's for showing particular tabs:

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #f9f9f9;
  font-weight: bold;
  transition: background ease 0.2s;
  border-radius: 15px
}

.tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked+label {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
}
/* ADDED */
input[type="radio"] {
  display: none;
}
#tabone:checked ~ .tab-content #tabone,
#tabtwo:checked ~ .tab-content #tabtwo ,
#tabthree:checked ~ .tab-content #tabthree {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

.tabp {
  line-height: 25px;
  text-align: left;
  padding: 5px;
  font-size: 15px;
}

<div class="col-lg-12">
  <div class="product__details__tab">
    <input type="radio" name="tabs" id="tabone" checked="checked">
    <input type="radio" name="tabs" id="tabtwo">
    <input type="radio" name="tabs" id="tabthree">
    <ul class="nav nav-tabs tabs">
      <li class="nav-item">
        <label for="tabone">Tabella Uno</label>
      </li>
      <li class="nav-item">
        <label for="tabtwo">Tabella Due</label>
      </li>
      <li class="nav-item">
        <label for="tabthree">Tab Tre</label>
      </li>
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane tab active" id="tabone">
        <h6>Description</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabtwo">
        <h6>Specification</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabthree">
        <h6>Reviews ( 2 )</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

pure css html tabs the click does not change

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related