Source: siteutil.accordionCSS [edit]
.accordion{ width: 400px; margin: 10px auto; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .accordion label{ font-family: Arial, sans-serif; padding: 5px 20px; position: relative; display: block; height: 30px; cursor: pointer; color: #777; line-height: 33px; font-size: 19px; background: #EFEFEF; border: 1px solid #CCC; } .accordion label:hover{ background: #F3F3F3; } .accordion input + label { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accordion input:checked + label, .accordion input:checked + label:hover{ background: #CDECC5; color: #3d7489; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .accordion input{ display: none; } .accordion .article{ background: rgb(255, 255, 255); overflow-y: scroll; height: 0px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accordion .article p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; } .accordion input:checked ~ .article{ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .accordion input:checked ~ .article.ac-small{ height: auto; max-height: 155px; } .accordion input:checked ~ .article.ac-medium{ height: auto; max-height: 195px; } .accordion input:checked ~ .article.ac-large{ height: auto; max-height: 245px; } .panel { display: block; padding: 10px; width: 185px; background-color: #424242; border-bottom: 1px solid black; } .panel a:link, .panel a:visited { color: #BDBDBD; text-decoration: none; } .panel a:hover { background-color: #369; color: #fff; }