I'm currently developping my company's website and in the gallery section, the managers wants a design like this:

![Screen](https://i.stack.imgur.com/izMdt.jpg)

Unfortunately, I don't know how I can do that... I tried searching Google but I didn't found anything.

It would be something like this and when you click on another `.item`, it close the current opened item and open the new one... the arrow should be below the item, centered with it. Also, when you click on the `.item.open` `<a>` link, it close the "pop-below" (similar to a popover but below instead of over...) if it is opened.

I know that my JQuery code will be something like:

```
$('.item a').click(function(e) {
    if ($(this).parent().hasClass('open')) {
         $(this).parent().removeClass('open'); // which would slide the details up
    } else {
         var $id = $(this).data('item-id');
         getItemDetail($id);
    }
    e.preventDefault();
});

```

Here's a exemple HTML I'll be using:

```
<div class="container">
    <div class="projects">
        <div class="item">
            <a href="#item" data-item-id="exempleid" class="item-link">
                <img src="" alt="item">
            </a>
            <!-- HERE GOES THE DETAIL-PANE -->
        </div>
    </div>
</div>

```

If someone has an idea on how I could do that, I would appreciate it!