JQuery несколько динамически создаваемых слайдов DIV, все открыты одновременно

У меня есть несколько слайдов, которые создаются динамически, как показано в фрагменте PHP ниже. В тот момент, когда вы щелкаете по заголовку, чтобы раскрыть его, он открывает каждый div, как вы можете видеть на скрипке ниже. Как добавить переменную из PHP и обработать ее в скрипте jQuery, чтобы каждый заголовок открывал свой собственный div, не затрагивая других? По сути, я ищу аккордеонную функцию с PHP vars.

FIDDLE

Jquery

$(function(){

//category drop downs

$(".category").hide();
$( ".tags h5" ).addClass( "open" );

var cat_open = 0;

$(".tags h5").click(function () {

if (cat_open == 1) {
$(".category").animate({"height":"toggle"}, 500);
cat_open = 0;
$( ".tags h5" ).addClass( "open" );
}
else if (cat_open == 0) {
$(".category").animate({"height":"toggle"}, 500);
cat_open = 1;
$( ".tags h5" ).removeClass( "open" );
}

});
});

PHP

foreach ( $categories as $category ){

echo '<h5 class="">'. $category->name . '</h5>';

echo'<div class="category '. $category->name . '">';

$sub_args = array(
'taxonomy'      => 'tags',
'parent'        => $category->term_id, // get child categories
'orderby'       => 'name',
'order'         => 'ASC',
'hierarchical'  => 1,
'pad_counts'    => 0
);

$sub_categories = get_categories( $sub_args );

foreach ( $sub_categories as $sub_category ){

echo '<label><input type="checkbox" id="type-'. $sub_category->name . '" rel="'. $sub_category->name . '">'. $sub_category->name . '</label>';

echo '<br />';

}

echo'</div>';//.categories

echo '<hr />';

}