CODEWITHSUNDEEP
htmlcssradio-button
replicant129
replicant129

Reputation: 103

display content above labels using radio tabs - CSS only?

I am trying to display the content ABOVE the tab labels when clicked. Is there a simple way to do this? Maybe using CSS only? When placing the content div above the label the page breaks... Any ideas will be appreciated.

Thanks in advance!

DEMO LINK

CSS

    .tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

HTML

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus varius urna, ac venenatis arcu convallis consequat. In augue est, posuere auctor facilisis varius, dictum ac risus. Donec nibh justo, aliquam sed tempus quis, lobortis sed orci.
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       <div class="content">
           Vivamus id elementum risus. In sit amet mi nulla, ac sollicitudin odio. Phasellus laoreet leo vitae velit lobortis at condimentum odio placerat. Nam sapien eros, accumsan id porttitor a, commodo ut urna. Cras dignissim metus quis enim placerat lobortis.
       </div> 
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           Phasellus scelerisque luctus ligula, a consequat orci posuere rutrum. Sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. Mauris viverra pretium ante, eu mollis nisi volutpat quis. Nunc neque erat, pharetra in feugiat eget, faucibus id sem. 
       </div> 
   </div>

</div>

Upvotes: 2

Views: 1038

Answers (1)

Larz
Larz

Reputation: 1186

If your complete design allows for it, you could assign a fixed height and min-width to the content area. Then you will be able to position the tabs by adding a negative value to their bottom property. 

.tab label {
    background: #eee;
    left: 1px;
    margin-left: -1px;
    padding: 10px;
    position: relative;
    /*--- Updated value ---*/
    bottom: -149px;
}
...
.content {
    background: white;
    left: 0;
   /*--- Updated values ---*/
    bottom: 0;
    height: 100px;
    min-width: 350px;
   /*----*/
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
}

Check it out here: http://jsbin.com/quceviha/1/

Upvotes: 1

Related Questions