css tabbed menu content not appearing when list inside div

Question

I have a div with a tabbed menu list inside it, when I select any tab the content should display within the same page.

Without the div (so just as a list) it works fine See working JSFIDDLE here however with the div, the content doesn't appear at all. Problematic JSFIDDLE here

I'm sure this can't be too difficult but I just can't see the issue.

Can anyone advise?

Working HTML:

<ul class="tabs">
    <li>
      <input type="radio" checked name="tabs" id="tab1">
      <label for="tab1">tab 1</label>
      <div id="tab-content1" class="tab-content animated fadeIn">
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab2">
      <label for="tab2">tab 2</label>
      <div id="tab-content2" class="tab-content animated fadeIn">
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE v CONTENT GOES HERE CONTENT GOES HERE
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab3">
      <label for="tab3">tab 3</label>
      <div id="tab-content3" class="tab-content animated fadeIn">
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE v CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
</ul>

and working CSS:

.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
}
.tabs {
width: 980px;
float: none;  
list-style: none;
position: relative;
padding: 0;
margin: 20px auto;
}
  .tabs li{
    float: left;
  }
  .clearFix
{
clear: both;
} 
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
  .tabs label:hover {
    background: rgba(255,255,255);
    top: 0;
  }

  [id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
  }

  [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
  .tab-content{
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #08C;
    padding: 15px;
    color: #4a4949;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }

Problematic CSS bit:

 .cont-wrapper{
    width: 980px;
    background: #82cff5;
    padding-right: 20px;
    padding-left: 20px;
overflow:hidden;
  }

score 0 · Answer 1 · answered Feb 03 '14 at 17:19

0

You don't have a height set on the div, and overflow is set to hidden, so nothing below the tabs are visible. Setting a height on div.cont-wrapper should fix it.

answered Feb 03 '14 at 17:19

Dpeif

532
1
6
18

Setting a height did the trick, I knew it would be something obvious! Thanks – jfar_2020 Feb 03 '14 at 17:32
Ok, the problem is the content under each tab is not the same length so the height needs to be dynamic. I tried setting height to 100% but no luck as that doesn't seem to have any effect at all. Check problematic JSFIDDLE again http://jsfiddle.net/UcqfA/6/) – jfar_2020 Feb 04 '14 at 08:55
for `height:100%` to work, the element's parents element needs to have an explicitly stated height value. Since `.cont-wrapper` is the highest level element with a height in your fiddle, 100% won't work. if you remove `overflow:hidden`, everything looks fine to me. If you need more help, consider posting another question with another fiddle – Dpeif Feb 04 '14 at 15:42

score 0 · Answer 2 · answered Feb 03 '14 at 17:19

It looks like you're not seeing the content because you have overflow:hidden; on your containing element. This is hiding anything that is trying to display outside of the .cont-wrapper

I would keep the tabs in a separate div from the copy block, things should be easier that way.

CSS:

   .cont-wrapper{
    //other styles
    overflow:hidden; // <- remove this entry
   }

css tabbed menu content not appearing when list inside div

2 Answers2