What is the best method for showing information beneath each tab?

Here is 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 trying to implement CSS tabs where each tab should display specific data, but the data is not showing up. Can you help me figure out what might be causing this issue?

Please review and provide feedback on my implementation using the following CodePen link: https://codepen.io/santoshch/pen/MWpYdXK

javascripthtmlcssvue.js

Answer №1

The reason for this issue is related to the presence of overflow: hidden; in the .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>

On another note, to make the tabs more versatile and easier to add or remove without using IDs, you can refer to: Multiple tabs in one HTML page without unique reference (no ID or class)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Push Button Unleashes a Cascade of Buttons

After creating a dropdown button, I encountered an issue where replicating it multiple times resulted in all the buttons on the page opening simultaneously. I initially thought that wrapping the button in a class called "dropdown" would prevent this from h ...

htmlcssbootstrap-4

Is there a way to align both the horizontal and rotated lines to intersect at a common point in HTML and CSS?

As a beginner, I'm looking to create a structure resembling a thigh, leg, and ankle using thick lines. My aim is to rotate them with animation, ensuring that the joints between the lines mimic those of a knee joint and hip joint. Below is the code sn ...

htmlcssweb

Ways to identify if a resize event was caused by the soft keyboard in a mobile browser

Many have debated the soft keyboard, but I am still searching for a suitable solution to my issue. I currently have a resize function like: $(window).resize(function() { ///do stuff }); My goal is to execute the 'stuff' in that function on ...

javascriptjqueryhtmlmobilebrowser

How to toggle classes on specific items generated with Vue JS's v-for directive

I have a list rendering using the v-for directive in Vue.js. <li v-for="group in groupList" :key="group.id" @dragenter="toggleClass ...."@dragleave="toggleClass ...." > Content </li> My goal is to apply a class to the li el ...

javascriptvue.jsdrag-and-dropv-for

Developing a custom function within an iterative loop

Can someone assist me with a coding problem? I have these 4 functions that I want to convert into a loop: function Incr1(){ document.forms[0].NavigationButton.value='Next'; document.PledgeForm.FUDF9.value='Y1'; document.fo ...

javascript

What is the best way to trigger a localstorage change event using Vue.js?

I'm currently facing an issue with my Vue app related to updating user information stored in localStorage. I've implemented a solution using websockets in App.vue within the mounted function, as shown below: window.Echo.channel("user." ...

javascriptvue.js

Is the onmouseover / onmouseout transition failing to function properly?

Is there a way to make the ease-in-out effect work without modifying the HTML code? http://jsfiddle.net/68ojLg6p/ <img class="transition-img" onmouseover="this.src='http://1.bp.blogspot.com/-ISjKMLTnaTQ/Ty-USX-J1uI/AAAAAAAAC_0/YB6MUMflRmg/s400/fe ...

csstransition

The Chrome extension takes control of the new tab feature by redirecting it to a custom newtab.html

I have a website https://example.com where users can adjust their site preferences, including enabling night mode. To enhance the user experience, I developed a Chrome extension for https://example.com that transforms Chrome's new tab with a custom ne ...

javascripthtmlcsscookiesgoogle-chrome-extension

What is the best way to assign a class to objects with a count greater than a

Can someone assist with editing a foreach loop to add a class to divs only if the number of divs is greater than 3, without affecting those with fewer divs? @if(!empty($property->testimonials)) @foreach($property->testimonials as $testimonial) ...

phphtmlfor-loopforeachlaravel-blade

Vue is throwing an error because the property or method being referenced in the render is not defined on the instance

I've set up a Vue component within my Laravel application: resources/assets/js/app.js: Vue.component('auth-form', require('./components/AuthForm.vue')); const app = new Vue({ el: '#app', data: { showMod ...

laravelvue.jsvue-component

Merging arrays with the power of ES6 spread operator in Typescript

My goal is to merge two arrays into one using the spread object method as shown in the code snippet below: const queryVariable = { ...this.state, filters: [...Object.keys(extraFilters || {}), ...this.state.filters], } The this.state.filte ...

javascripttypescriptecmascript-6

Ensure that columns are neatly arranged horizontally when they do not all fit in one row

I currently have a row with 6 columns, but when they can't fit next to each other on the screen, 2 of them get pushed below, resulting in a messy layout. I could use a media query to solve this issue, however, I am curious if there is a better way to ...

htmlcsscss-gridbootstrap-5

What is the best way to implement a day timer feature using JavaScript?

I am looking for a timer that can automatically change the rows in an HTML table every day. For example, if it is Day 11, 12, or 25 and the month is February at 8 AM, the rows should display "Hello!". function time() { var xdate = new Date(); var ...

javascripthtmldatedatetimetimer

Why do I see a CSRF cookie not being set on just one URL in Django Rest Framework when all the forms have the same setup?

Sharing a URL for evaluating an opportunity: path("opportunities/rate/", RateOpportunity.as_view), While using a Vue application to send a post request, I encountered a CSRF cookie not set error specifically at this endpoint. Interestingly, all ...

pythondjangovue.jsdjango-rest-framework

Tips for dividing the rows within an array using the match() function?

Within my matrix are arrays of rows. let matrix=[['hello'],['world']]; I am looking to duplicate each row within the matrix. matrix=matrix.map(x=>String(x).repeat(2)).map(x=>x.match(new RegExp??)) The desired outcome should be [ ...

javascriptarraysstring-matching

Issue with closing collapsed menu on click in Bootstrap version 3

Here is the code snippet: <li> <a href="#" id="statics" class="main-bar"> <span class="glyphicon glyphicon-stats" aria-hidden="true"></span> </a> </li> I am trying to toggle the responsive menu on eleme ...

jqueryhtmltwitter-bootstrap

Showcasing the values of JavaScript

How can I resolve the issue depicted in the second picture? I need the value of 3 only in the USD column, with all others having a value of zero. <div class="span3"> <ul class="nav nav-tabs nav-stacked" > <?php foreach ( ...

javascriptjqueryhtmlmysqlcss

Angular Universal causing issues with updating the DOM component

@Component({ selector: 'mh-feature-popup', template: ` <div class="full"> <div> <div class="container-fluid" [@featurepop]="state"> <div class="row"> <div class="col-xs-12 col-md-4 col-md-offse ...

javascriptangulartypescriptangular-universal

"Auth.currentSession is indicating that there is no user currently logged in

I am currently working on a basic React app with authentication using aws-amplify. My user pool is set up in Cognito and I can successfully redirect the user to the hosted UI for login. However, when trying to retrieve the current session, I am receiving a ...

javascriptreactjsamazon-cognitoaws-amplify

Tips for dividing a div into percentages while maintaining a constant width for a div on the left side

I need help with creating a layout that involves 4 boxes. The first box (box1) should have a width of 50px on the left side, while the remaining 3 boxes should fill in the rest of the screen and be resizable. Can someone guide me on achieving this layout? ...

jqueryhtmlcss