Accordion on Sharepoint 2010 content query

Accordion on Sharepoint 2010 content query

I am now trying to implement the accordion function for a content query
webpart.
Basically, the content query structure looks like this: Title Content I
want to expand collapse <li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>
<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>
<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>
and I have 3-5 of them.
What I want to do now is to expand collapse the description div whenever I
click on the corresponding link-item (title) div.
Here is my JS code:
$(document).ready(function () {
//ACCORDION BUTTON ACTION
$('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
//MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
if ($('#MSOZoneCell_WebPartWPQ3 .description').hasClass('openDiv')) {
$('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
$(this).next().removeClass('openDiv');
} else {
$('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
$(this).next().toggle('normal');
$(this).next().addClass('openDiv');
}
});
//HIDE THE DIVS ON PAGE LOAD
$("#MSOZoneCell_WebPartWPQ3 .description").hide();
});
The problem I have now is that whenever I click on any one of the titles,
ALL the description div expands, which is not what I want because I want
only that particular description under the title I clicked to expand.
Any help here will be much appreciated here ! Thanks!!