Im developing on a grid-system with several collapsed items in a row. The collapse is triggered when clicking on the title or the thumbnail.
Now the problem is: When i expand 1 item of a row, every other item is automatically expanded too, but the expanded text is only shown in the current item. I want only 1 item to expand and the rest to order themself in the grid system:
This img shows how it acts currently:
And this is how i wanted it to act:
Here is a fiddle of my current code: Fiddle
HTML Code of 1 item (only because some code is needed for fiddle):
<div class="flex-container">
<div id="item1" class ="item">
<a data-toggle="collapse" href="#collapse-1" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 0</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-1" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
</div>
Thanks in advance.
EDIT: Any updates? :)
You are facing this problem due to
flex
. To fix this issue you have to go with other option like this:You can also check the updated Single column fiddle
Or you can make the hidden div absolute like this Two column fiddle