After finding an accordion online, I decided to restyle it and add a slide effect. However, I encountered a problem with setting the height to 100px. When trying to change it to auto, the slide effect that I wanted was removed. How can I set the height so that it fits the text while still maintaining the slide animation?
Here is my current implementation.
body {
background:#d0d0d5;
}
/* Basic structure */
#accordion {
margin: 100px auto;
width: 400px;
}
#accordion ul {
list-style: none;
margin: 0;
padding: 0;
}
.accordion {
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
height: 0px;
overflow: none;
line-height: 1.3em;
overflow: hidden;
}
.accordion:target {
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
height: 100px;
}
#accordion ul li a {
text-decoration:none;
display:block;
padding:10px;
}
.accordion{
padding:0px;
}
/* Colors */
#accordion ul{
-webkit-box-shadow:0 4px 10px #3f3f3f;
-moz-box-shadow:0 4px 10px #3f3f3f;
box-shadow:0 4px 10px #3f3f3f;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
#accordion ul li a {
background: #2B2D30;
border-bottom:1px solid orange;
color: white;
}
.accordion {
-webkit-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
height: 0px;
background:#fdfdfd;
color:#999;
}
.accordion:target {
border-top:3px solid #ffbf87;
}<div id="accordion">
<ul>
<li>
<a href="#one" >Q. test</a>
<div id="one" class="accordion">
test text
</div>
</li>
<li>
<a href="#two">Q. another tester</a>
<div id="two" class="accordion">
here is another text
</div>
</li>
<li>
<a href="#three">Q. I keep getting errors what do I do?</a>
<div id="three" class="accordion">
Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
</div>
</li>
</ul>
</div>