CODEWITHSUNDEEP
javascripthtmlcssvue.js
T dhanunjay
T dhanunjay

Reputation: 820

How to display data under each tab?

My codepen link https://codepen.io/santoshch/pen/MWpYdXK

.tab1border{
  border-right: 2px solid #f0f0f0;
}
.tab2border{
  border-right: 2px solid #f0f0f0;
}
.tab3border{
  border-right: 2px solid #f0f0f0;
}
.tab4border{
  border-right: 2px solid #f0f0f0;
}
.tab5border{
  border-right: 2px solid #f0f0f0;
}
.tab6border{
  border-right: 2px solid #f0f0f0;
}
.container-prod {
  z-index: 1;
  background-color: #fff;
  height: 50px;
  width: 1000px;
  position: absolute;
  top: 205px;
  left: 531px;
  transform: translate(-50%, -50%);
  font-size: 0;
  border-radius: 3px;
  overflow: hidden;
  input {
    display: none;
    &:checked + label {
      font-weight: 700;
      color: #2241a6;
      // background: #eee;
    }
    @for $i from 1 through 7 {
      &#tab#{$i}:checked {
        ~ .line {
          left: #{($i - 1) * 14.28%};
        }
        ~ .content-container #c#{$i} {
          opacity: 1;
        }
      }
    }
  }
  label {
    background-color: #fff;
    display: inline-block;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    width: 142px;
    text-align: center;
    color: #555;
    position: relative;
    cursor: pointer;
    padding: 0 10px;
    &::after {
      content: "";
      height: 2px;
      width: 100%;
      position: absolute;
      display: block;
      bottom: 0;
      opacity: 0;
      left: 0;
    }
    &:hover::after {
      opacity: 1;
    }
  }
  .line {
    position: absolute;
    height: 16px;
    border-bottom: 4px solid #2241a6;
    width: 138px;
    top: 34px;
    left: 0;
  }
  .content-container {
    background: #eee;
    position: relative;
    height: 100px;
    font-size: 16px;
    .content {
      position: absolute;
      padding: 10px;
      width: 100%;
      top: 0;
      opacity: 0;
      transition: 0.25s ease;
      color: #333;
      h3 {
        font-weight: 200;
        margin: 10px 0;
      }
      p {
        margin: 10px 0;
      }
      p, i {
        font-size: 13px;
      }
    }
  }
}
    <div class="container-prod">
      <input type="radio" id="tab1" name="tab" checked />
      <label for="tab1" class="tab1border">Hed</label>
      <input type="radio" id="tab2" name="tab" />
      <label for="tab2" class="tab2border">Col</label>
      <input type="radio" id="tab3" name="tab" />
      <label for="tab3" class="tab3border">Tars</label>
      <input type="radio" id="tab4" name="tab" />
      <label for="tab4" class="tab4border">Wre rods</label>
      <input type="radio" id="tab5" name="tab" />
      <label for="tab5" class="tab5border">ated</label>
      <input type="radio" id="tab6" name="tab" />
      <label for="tab6" class="tab6border">Color coed</label>
      <input type="radio" id="tab7" name="tab" />
      <label for="tab7">steel</label>
      <div class="line"></div>
       <div class="content-container">
    <div class="content" id="c1">
      <h3>Features</h3>
      <p>There really are a lot of features.</p>
    </div>
    <div class="content" id="c2">
      <h3>History</h3>
      <p>The project started in 2018 when someone needed something.</p>
    </div>
    <div class="content" id="c3">
      <h3>Reviews</h3>
      <p>Amazing product. I don't know how it works.</p>
      <i>- Anonymous</i>
    </div>
    <div class="content" id="c4">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
        <div class="content" id="c5">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
        <div class="content" id="c6">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
        <div class="content" id="c7">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
  </div>
    </div>

I am working on a css tabs, Where for every tab, I am trying to display some data, But data is not reflecting, Dont know due to what cause data is not displaying for each tab.

Can you please correct me if i am wrong.

My codepen link https://codepen.io/santoshch/pen/MWpYdXK

Upvotes: 1

Views: 54

Answers (1)

vanowm
vanowm

Reputation: 10201

It's due to overflow: hidden; in .container-prod class:

.tab1border {
  border-right: 2px solid #f0f0f0;
}

.tab2border {
  border-right: 2px solid #f0f0f0;
}

.tab3border {
  border-right: 2px solid #f0f0f0;
}

.tab4border {
  border-right: 2px solid #f0f0f0;
}

.tab5border {
  border-right: 2px solid #f0f0f0;
}

.tab6border {
  border-right: 2px solid #f0f0f0;
}

.container-prod {
  z-index: 1;
  background-color: #fff;
  height: 50px;
  width: 1000px;
  position: absolute;
  top: 205px;
  left: 531px;
  transform: translate(-50%, -50%);
  font-size: 0;
  border-radius: 3px;
/*  overflow: hidden; */
}
.container-prod input {
  display: none;
}
.container-prod input:checked + label {
  font-weight: 700;
  color: #2241a6;
}
.container-prod input#tab1:checked ~ .line {
  left: 0%;
}
.container-prod input#tab1:checked ~ .content-container #c1 {
  opacity: 1;
}
.container-prod input#tab2:checked ~ .line {
  left: 14.28%;
}
.container-prod input#tab2:checked ~ .content-container #c2 {
  opacity: 1;
}
.container-prod input#tab3:checked ~ .line {
  left: 28.56%;
}
.container-prod input#tab3:checked ~ .content-container #c3 {
  opacity: 1;
}
.container-prod input#tab4:checked ~ .line {
  left: 42.84%;
}
.container-prod input#tab4:checked ~ .content-container #c4 {
  opacity: 1;
}
.container-prod input#tab5:checked ~ .line {
  left: 57.12%;
}
.container-prod input#tab5:checked ~ .content-container #c5 {
  opacity: 1;
}
.container-prod input#tab6:checked ~ .line {
  left: 71.4%;
}
.container-prod input#tab6:checked ~ .content-container #c6 {
  opacity: 1;
}
.container-prod input#tab7:checked ~ .line {
  left: 85.68%;
}
.container-prod input#tab7:checked ~ .content-container #c7 {
  opacity: 1;
}
.container-prod label {
  background-color: #fff;
  display: inline-block;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  width: 142px;
  text-align: center;
  color: #555;
  position: relative;
  cursor: pointer;
  padding: 0 10px;
}
.container-prod label::after {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  display: block;
  bottom: 0;
  opacity: 0;
  left: 0;
}
.container-prod label:hover::after {
  opacity: 1;
}
.container-prod .line {
  position: absolute;
  height: 16px;
  border-bottom: 4px solid #2241a6;
  width: 138px;
  top: 34px;
  left: 0;
}
.container-prod .content-container {
  background: #eee;
  position: relative;
  height: 100px;
  font-size: 16px;
}
.container-prod .content-container .content {
  position: absolute;
  padding: 10px;
  width: 100%;
  top: 0;
  opacity: 0;
  transition: 0.25s ease;
  color: #333;
}
.container-prod .content-container .content h3 {
  font-weight: 200;
  margin: 10px 0;
}
.container-prod .content-container .content p {
  margin: 10px 0;
}
.container-prod .content-container .content p, .container-prod .content-container .content i {
  font-size: 13px;
}
<div class="container-prod">
      <input type="radio" id="tab1" name="tab" checked />
      <label for="tab1" class="tab1border">Hed</label>
      <input type="radio" id="tab2" name="tab" />
      <label for="tab2" class="tab2border">Col</label>
      <input type="radio" id="tab3" name="tab" />
      <label for="tab3" class="tab3border">Tars</label>
      <input type="radio" id="tab4" name="tab" />
      <label for="tab4" class="tab4border">Wre rods</label>
      <input type="radio" id="tab5" name="tab" />
      <label for="tab5" class="tab5border">ated</label>
      <input type="radio" id="tab6" name="tab" />
      <label for="tab6" class="tab6border">Color coed</label>
      <input type="radio" id="tab7" name="tab" />
      <label for="tab7">steel</label>
      <div class="line"></div>
       <div class="content-container">
    <div class="content" id="c1">
      <h3>Features</h3>
      <p>There really are a lot of features.</p>
    </div>
    <div class="content" id="c2">
      <h3>History</h3>
      <p>The project started in 2018 when someone needed something.</p>
    </div>
    <div class="content" id="c3">
      <h3>Reviews</h3>
      <p>Amazing product. I don't know how it works.</p>
      <i>- Anonymous</i>
    </div>
    <div class="content" id="c4">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
        <div class="content" id="c5">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
        <div class="content" id="c6">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
        <div class="content" id="c7">
      <h3>Share</h3>
      <p>This product is currently not shareable.</p>
    </div>
  </div>
    </div>

P.S. you can make tabs more "universal" and simpler to add/remove by avoiding using IDs: Multiple tabs in one HTML page without unique reference (no ID or class)

Upvotes: 2

Related Questions