Easy Accordion em JQUERY

Cenário

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

http://jsfiddle.net/itsduc/bwYCS/