Pure CSS Accordion Feature

Question

I have code below for a pure CSS accordion list. I was wondering if its possible to have the text under the heading sort of fly in like the example here: http://codepen.io/pirrera/pen/KwzMGZ ,but using pure CSS only? Anything helps, cheers.

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #005bab;
  overflow: hidden;
}
.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.label {
  position: relative;
  text-align:center;
  display: block;
  padding: 0 0 0 1em;
  background: #e2ecf6;
  font-size:14px;
  font-family:Verdana;
  font-weight: bold;
  line-height: 6;
  cursor: pointer;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #f4f8fc;
  -webkit-transition: max-height .5s;
  -o-transition: max-height .5s;
  transition: max-height .5s;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
.input:checked ~ .tab-content {
  max-height: 10em;
}
/* Icon */
.label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.input[type=checkbox] + .label::after {
  content: "+";
}
.input[type=radio] + .label::after {
  content: "";
}
.input[type=checkbox]:checked + .label::after {
  transform: rotate(315deg);
}
.input[type=radio]:checked + .label::after {
  transform: rotateX(180deg);
}
.bottombar{
       content: "";
       display:block;
       height:1em;
       width:100%;
       background-color:#00688B;
}

<div class="wrapper">
      <div class="tab">
         <input name="tabs" class="input" id="tab-one" type="checkbox"/>
         <label class="label" for="tab-one">Label One</label>
         <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
         </div>
      </div>
      <div class="tab">
         <input name="tabs" class="input" id="tab-two" type="checkbox"/>
         <label class="label" for="tab-two">Label Two</label>
         <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
         </div>
      </div>
      <div class="tab">
         <input name="tabs" class="input" id="tab-three" type="checkbox"/>
         <label class="label" for="tab-three">Label Three</label>
         <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
         </div>
      </div>
     <div class="bottombar"></div>
</div>

Michael Coker · Answer 1 · 2017-05-23T20:54:26.227

Yeah, you can shrink the content using transform: scale() and hide it using opacity: 0, then transition those to normal values when the label/input are :checked

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}

/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #005bab;
  overflow: hidden;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.label {
  position: relative;
  text-align: center;
  display: block;
  padding: 0 0 0 1em;
  background: #e2ecf6;
  font-size: 14px;
  font-family: Verdana;
  font-weight: bold;
  line-height: 6;
  cursor: pointer;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  background: white;
}

.tab-content p {
  padding: 1em;
  margin: 0 0 0 2em;
  background: #f4f8fc;
}

/* :checked */
.input:checked ~ .tab-content {
  max-height: 10em;
}

/* Icon */
.label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
}

.input[type=checkbox] + .label::after {
  content: "+";
}

.input[type=radio] + .label::after {
  content: "";
}

.input[type=checkbox]:checked + .label::after {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}

.input[type=radio]:checked + .label::after {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.bottombar {
  content: "";
  display: block;
  height: 1em;
  width: 100%;
  background-color: #00688B;
}

.tab-content {
  transform: scale(0.5);
  opacity: 0;
  transition: transform .5s, opacity .5s, -webkit-transform .5s, max-height .5s;
}

input:checked ~ .tab-content {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

<div class="wrapper">
      <div class="tab">
         <input name="tabs" class="input" id="tab-one" type="checkbox"/>
         <label class="label" for="tab-one">Label One</label>
         <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
         </div>
      </div>
      <div class="tab">
         <input name="tabs" class="input" id="tab-two" type="checkbox"/>
         <label class="label" for="tab-two">Label Two</label>
         <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
         </div>
      </div>
      <div class="tab">
         <input name="tabs" class="input" id="tab-three" type="checkbox"/>
         <label class="label" for="tab-three">Label Three</label>
         <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
         </div>
      </div>
     <div class="bottombar"></div>
</div>

Good lord, beat me by seconds, my [codepen](https://codepen.io/chris-w/pen/jmdrre) of the same thing. I can't keep up with the html/css answerers, too many people on the ball with these easy ones. +1 — Chris W., May 23 '17 at 19:42
@ChrisW. for real, happens to me all day, too. Thanks for the upvote :) — Michael Coker, May 23 '17 at 19:45
What about the little strip of border on the left side when expanded? How would I get that. — , May 23 '17 at 19:54
@DisplayName not sure what you mean. can you make a screenshot? is it just in my answer or in your original code too? — Michael Coker, May 23 '17 at 19:55
In the code pen example I linked, the white strip on the left — , May 23 '17 at 19:57
@DisplayName I don't see a boder on the left side in this pen. can you make a screenshot? http://codepen.io/pirrera/pen/KwzMGZ — Michael Coker, May 23 '17 at 20:00
not so much a border, but the text flies in and the background color is white, but the text is on a separate gradient color and leaves a little bit of white space on the left. — , May 23 '17 at 20:08
@DisplayName are you just wanting to use a left `padding`? Or you want the white gradient thing at the bottom? If not **please make a screenshot** — Michael Coker, May 23 '17 at 20:10
@DisplayName it doesn't look like that for me http://i.imgur.com/2Q3E117.png and your post says "I was wondering if its possible to have the text under the heading sort of fly in like the example" does this not answer the question? — Michael Coker, May 23 '17 at 20:33
What about this one? Do you see the two different colors? https://codepen.io/samsurysites/pen/qxHJK or https://codepen.io/ColeGwoz/pen/oWWmZo — , May 23 '17 at 20:37
Perfect, but why does the content close instantly? It should close at roughly the same speed as the original. — , May 23 '17 at 20:51
@DisplayName needed to add max-height to the transition. updated — Michael Coker, May 23 '17 at 20:54
@MichaelCoker Perfect, thank you so much for the help! Cheers! — , May 23 '17 at 20:55

Chiller · Accepted Answer · 2017-05-24T14:07:03.063

You can animate the scale of the paragraph when checkbox is checked

.input:checked~.tab-content p {
  transform: scale(1);
}

see code below:

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}


/* Acordeon styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #005bab;
  overflow: hidden;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.label {
  position: relative;
  text-align: center;
  display: block;
  padding: 0 0 0 1em;
  background: #e2ecf6;
  font-size: 14px;
  font-family: Verdana;
  font-weight: bold;
  line-height: 6;
  cursor: pointer;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  padding: 0px;
  -webkit-transition: max-height .5s;
  -o-transition: max-height .5s;
  transition: max-height .5s;
  padding-left: 20px;
  background: #c3d7ea;
}

.tab-content .container {
  padding: 1em;
  margin: 0;
  transform: scale(0.6);
  -webkit-transition: transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
  background: #f4f8fc;
}


/* :checked */

.input:checked~.tab-content {
  max-height: 10em;
}

.input:checked~.tab-content .container {
  transform: scale(1);
}


/* Icon */

.label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.input[type=checkbox]+.label::after {
  content: "+";
}

.input[type=radio]+.label::after {
  content: "";
}

.input[type=checkbox]:checked+.label::after {
  transform: rotate(315deg);
}

.input[type=radio]:checked+.label::after {
  transform: rotateX(180deg);
}

.bottombar {
  content: "";
  display: block;
  height: 1em;
  width: 100%;
  background-color: #00688B;
}

<div class="wrapper">
  <div class="tab">
    <input name="tabs" class="input" id="tab-one" type="checkbox" />
    <label class="label" for="tab-one">Label One</label>
    <div class="tab-content">
      <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        <div>this is another div</div>
      </div>
    </div>
  </div>
  <div class="tab">
    <input name="tabs" class="input" id="tab-two" type="checkbox" />
    <label class="label" for="tab-two">Label Two</label>
    <div class="tab-content">
      <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
  </div>
  <div class="tab">
    <input name="tabs" class="input" id="tab-three" type="checkbox" />
    <label class="label" for="tab-three">Label Three</label>
    <div class="tab-content">
      <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
  </div>
  <div class="bottombar"></div>
</div>

How would I get the bit of white space left? http://imgur.com/a/r0oVg But I would want to change the color of the white space background — , May 23 '17 at 20:30
@DisplayName you can get that using margin and padding in a correct way ... see my edit :) — Chiller, May 24 '17 at 07:07
Is there anyway to have the fly in not just as a paragraph. If I add anything else like an
or a
inside the content it doesn't work. — , May 24 '17 at 13:53
To do that you need to wrap them inside a container and use the animation on the div container, meaning you have to change `.input:checked~.tab-content p` to `.input:checked~.tab-content .container` — Chiller, May 24 '17 at 13:58
Alright, can you update your code so I can mark it as the correct answer — , May 24 '17 at 13:59
I update my code ..you can see that i added a div after the p and wraped them inside a container, now the style should be applied on the container not p. — Chiller, May 24 '17 at 14:02

score 0 · Answer 3 · answered May 23 '17 at 19:40

Use transform: scale() to "grow"/"shrink" the content, and transition for the effect.

Pen: https://codepen.io/kjkta/pen/MmLewZ

I've added:

.tab-content {
    transition: .5s transform;
    transform: scale(.1);
}
.input:checked ~ .tab-content {
    transform: scale(1);
}

Pablo Darde · Answer 4 · 2017-05-23T21:34:49.377

EDITED

This is a simple and functional example: However, you can't simulate an "onclick" event with css. You also can check this post for more clarification: Can I have an onclick effect in CSS?

If you do not mind having a little bit of pure JavaScript in your code, see this example:

https://jsfiddle.net/8xs83phb/

If you want an "hover" event based accordion, see the below code.

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

h2 {
  margin: 0;
  text-align: center;
  font: normal 22px Arial, Verdana;
}

.box {
  width: 200px;
  max-height: 40px;
  padding: 10px 0;
  background: #fdfdfd;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid black;
  transition: all 0.5s;
}

.box:hover {
  max-height: 300px;
}

<ul>
  <li>
    <div class='box'>
      <h2>Item One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </li>
  <li>
    <div class='box'>
      <h2>Item Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </li>
  <li>
    <div class='box'>
      <h2>Item Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </li>
</ul>

Pure CSS Accordion Feature

4 Answers4