Existem tantas maneiras de fazer um acordeão. É assim que eu faço. Deixe-me saber sua opinião, sugestões, melhorias.
Aproveitar!
HTML
<div class="accordion">
<h2>Title One</h2>
<div>Integer mollis lorem id sem sollicitudin pretium. Nulla vel fermentum arcu. In ultricies magna at turpis porta porta. Sed lacinia porttitor lobortis.</div>
<h2>Title Two</h2>
<div>Integer mollis lorem id sem sollicitudin pretium. Nulla vel fermentum arcu. In ultricies magna at turpis porta porta. Sed lacinia porttitor lobortis.</div>
<h2>Title Three</h2>
<div>Integer mollis lorem id sem sollicitudin pretium. Nulla vel fermentum arcu. In ultricies magna at turpis porta porta. Sed lacinia porttitor lobortis.</div>
</div>
CSS
.accordion {
border: 1px solid #d1d1cf;
cursor: pointer;
padding: 10px;
width: 500px;
}
.accordion h2 {
border: 1px solid #d1d1cf;
padding: 10px;
background-image: linear-gradient(bottom, rgb(205,206,202) 0%, rgb(236,236,236) 100%);
background-image: -o-linear-gradient(bottom, rgb(205,206,202) 0%, rgb(236,236,236) 100%);
background-image: -moz-linear-gradient(bottom, rgb(205,206,202) 0%, rgb(236,236,236) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(205,206,202) 0%, rgb(236,236,236) 100%);
background-image: -ms-linear-gradient(bottom, rgb(205,206,202) 0%, rgb(236,236,236) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(205,206,202)),
color-stop(1, rgb(236,236,236))
);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.accordion div {
display: none;
margin: 10px;
}
JQUERY
$('.accordion h2').click(function(){
if($(this).next('div').is(':visible')){
$(this).next('div').slideUp();
}else{
$('.accordion h2').next('div').slideUp();
$(this).next('div').slideToggle();
}
});
DEMO