Easy Accordion in JQUERY

There are so many ways to do an accordion. This is how I do it. Let me know your thoughts, suggestions, improvements.

Enjoy!

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/