Accordion Rollout Sample

Hover for height animate

Rollout the Blue Carpet!

This uses HTML and CSS to create an accordion or rollout effect.


Code:
Hover for height animate

Rollout the Blue Carpet!

This uses HTML and CSS to create an accordion or rollout effect.

CSS:
body {
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion {
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
}
.accordion:hover .accordion-content {
max-height: 300px;
}
.accordion-content {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
}
.accordion-inner {
padding: 0 15px;
}
.accordion-toggle {
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #fff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.accordion-toggle:hover {
background: #00727d;
}