Code
HTML
<![CDATA[
<div class="accordion-header normal-width">
<h3>Category</h3>
</div>
<div class="accordion-body-text normal-width">
<p>Information goes here</p>
</div>
]]>
CSS
<![CDATA[
.accordion-header {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 15px 40px 15px 15px;
margin: 0 0 -1px 0;
cursor: pointer;
overflow-y: hidden;
color: #900;
position: relative;
font-size: 16px;
}
.accordion-header:hover {
background-color: #fff;
}
.accordion-header.open-accordion {
border-bottom: none;
margin-bottom: 7px;
}
.accordion-header p, .accordion-header h2, .accordion-header h3, .accordion-header h4 {
display: inline-block;
width: auto;
margin: 0;
line-height: normal;
vertical-align: middle;
}
.d {
display: inline-block;
position: absolute;
right: 10px;
width: 22px;
height: 22px;
top: 50%;
margin-top: -11px;
margin-left: 12px;
vertical-align: middle;
}
.ie7 .accordion-header p, .ie7 .accordion-header h2, .ie7 .accordion-header h3, .ie7 .accordion-header h4, .ie7 .d {
zoom: 1;
display: inline;
}
.ie7 .d {
overflow-y: hidden;
}
.d1, .d2 {
position: absolute;
}
.d1 {
left: 10px;
width: 2px;
height: 22px;
background-color: #900;
}
.d2 {
top: 10px;
width: 22px;
height: 2px;
background-color: #900;
}
.accordion-body-text {
display: none;
padding: 0 30px 25px;
font-size: 16px;
line-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
]]>
