Push div elements to bottom of container when above tab open

0
votes

Im building an accordion style menu system and i have it mostly completed with the exception of needing to have any menus push down to the bottom of the container when an above tab is open.

If tab2 is opened then i want tab1 and tab2 to stay at the top and i want tab3, tab4 and tab5 to push down to the bottom of the container. Can this be done with CSS only?

jsfiddle - I want the end result to look like the image below.

enter image description here

css

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html,
body {
 height: 100%;
 font: 16px/1 'Open Sans', sans-serif;
 color: #555;
 background: #212121;
}

.togglebox {
 width: 240px;
 height: 100%;
 background: #252525;
}

input[type="radio"] {
 position: absolute;
 opacity: 0;
}

label {
 position: relative;
 display: block;
 height: 30px;
 line-height: 30px;
 padding: 0 20px;
 font-size: 14px;
 font-weight: bold;
 color: rgba(255, 255, 255, 0.5);
 background: #434343;
 cursor: pointer;
}

label:hover {
 background: #1f2d3a;
}

.content {
 height: 0;
 overflow: hidden;
}

input[type="radio"]:checked ~ .content {
 height: auto;
}

p {
 margin: 15px 0;
 padding: 0 20px;
 font-size: 11px;
 line-height: 1.5;
 color: rgba(255, 255, 255, 0.8);
}

.togglebox div {
    margin-bottom: 1px;
}
.togglebox div.active label {
    /* Active label that was selected */
    background: red;
}

html

<div class="togglebox">
            <div class="tab">
              <input id="radio1" type="radio" name="toggle"/>
              <label for="radio1">Tab1</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab active">
              <input id="radio2" type="radio" name="toggle" checked="checked"/>
              <label for="radio2">Tab2</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio3" type="radio" name="toggle"/>
              <label for="radio3">Tab3</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio4" type="radio" name="toggle"/>
              <label for="radio4">Tab4</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio5" type="radio" name="toggle"/>
              <label for="radio5">Tab5</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
          </div>
1
javascripthtmlcss
Use jquery animate for this. – MadeInDreams
@MadeInDreams Never use JavaScript, let alone a library, for something that can be easily achieved with CSS :) – Tyler Roper

1 Answers

1
votes

You should set the height of the active item to be the full height of the screen (100vh), minus the height of your 5 labels (150px). I've made it 155px to account for an extra 5px of the borders/spaces between the labels.

input[type="radio"]:checked ~ .content {
 height: calc(100vh - 155px);
}

As a fun tip, now that you're not using height: auto; for the content, you can animate the height. Putting transition: height 0.2s; on the .content { ... } styling will give you a neat little animation of the sliders opening/closing. Feel free to remove that in the below example.

Working example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font: 16px/1 'Open Sans', sans-serif;
  color: #555;
  background: #212121;
}

.togglebox {
  width: 240px;
  height: 100%;
  background: #252525;
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  background: #434343;
  cursor: pointer;
}

label:hover {
  background: #1f2d3a;
}

.content {
  height: 0;
  overflow: hidden;
  transition: height 0.2s;
}

input[type="radio"]:checked ~ .content {
 height: calc(100vh - 155px);
}

p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.togglebox div {
  margin-bottom: 1px;
}

.togglebox div.active label {
  /* Active label that was selected */
  background: red;
}
<div class="togglebox">
  <div class="tab">
    <input id="radio1" type="radio" name="toggle" />
    <label for="radio1">Tab1</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab active">
    <input id="radio2" type="radio" name="toggle" checked="checked" />
    <label for="radio2">Tab2</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab">
    <input id="radio3" type="radio" name="toggle" />
    <label for="radio3">Tab3</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab">
    <input id="radio4" type="radio" name="toggle" />
    <label for="radio4">Tab4</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab">
    <input id="radio5" type="radio" name="toggle" />
    <label for="radio5">Tab5</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
</div>