How to properly handle Click?

Question

JavaScript

There are 5 blocks with the same class with nested divs, there is a click handler, how to make it so that when you click on a certain block, this particular block opens, and when you click on another block, the previous one closes and the one you clicked opens ...

<div class="mini-wrapper" data-mini-wrapper-id="">
        <div class="mini-main" data-mini-main-id="">
            <?php print render($items[0]);?>
        </div>
        <div class="mini-selector" data-mini-selector-top-id="">
            <?php foreach ($items as $delta => $item): ?>
                <div data-mini-selector-id="<?php echo $delta?>">
                    <?php print render($item)?>
                </div>
            <?php  endforeach?>
        </div>
    </div>

This block is repeated 5 times, when you click on the "mini-wrapper" opens the "mini-selector"

here is the js

$("div.mini-wrapper").click(function (e) {

    $(this).find("div.mini-selector").fadeToggle('fast');
    /* тут остальной код */

});

here is an example

Answer 1

Like this
Just store the previous object in a variable and collapse it before opening a new one.