Div Expand and Collapse

Div Expand and Collapse

Hi all,

Problem is when I click on link addClass and removeClass working fine but all div's with class "box-panel"

slideDown and slideUp at a time and that should not happen.

One div should be show or hide instead of all

I hope you got my point

Script

jQuery(document).ready(function () {
	var topBoxA = jQuery('.box-top > a');
	jQuery('.icon').addClass('iconplus');
    jQuery(topBoxA).click(function () {
        debugger;
        if (jQuery(this).hasClass('iconplus')) {
            jQuery(this).removeClass('iconplus');
            jQuery(this).addClass('iconminus');
            jQuery('.box-panel').slideDown(300);
        }
        else {
            jQuery(this).removeClass('iconminus');
            jQuery(this).addClass('iconplus');
            jQuery('.box-panel').slideUp(300);
        }
    });
});

HTML

<div class="box">
	<div class="box-top">
            News
	    <a class="icon" href="#"></a>
	</div>
	<div class="box-panel">
		Text
	</div>
</div>
<div class="box">
	<div class="box-top">
            News
	    <a class="icon" href="#"></a>
	</div>
	<div class="box-panel">
	     Text
	</div>
</div>

Thanks in advance 

Regards