I have set of divs inside one container div called: **"people"**.  

each div is called **"people-box"**  

inside each **"people-box"** I have a div called: **"people-description"** 

So this will describe my hierarchy:

```
<div class="people">

  <div class="people-box">
    <div class="people-description"></div>
  </div>

  <div class="people-box">
    <div class="people-description"></div>
  </div>

  <div class="people-box">
    <div class="people-description"></div>
  </div>

</div> 

```

I would like to trigger to actions here:  

when someone is clicking on "people-box" div I want to fade toggle the description, simply show and hide

it is working using this method:

```
$('.people-box').click(function(){
        $(this).find('.people-description').fadeToggle(500);

});

```

however, this is working only when I am on the same div clicking to show the description and clicking again to hide it.
if the description is shown and I am clicking on another **"people-box"** it is not fading the one that is shown..  

I would like that too work (toggling the description clicking the same div)
but also when moving to another **"people-box"** I would like to fade out all others that left open

Will appreciate any solution  

Thanks