In my latest project, I utilized CSS Flexbox to create a sophisticated two-column layout that allows toggling each column independently. While this functionality is exactly what I need, I can't help but feel that my current method is somewhat cumbersome. To achieve the two-column layout, I have to manually set the height of the container, which feels like an impractical solution. One approach could be to dynamically calculate the height based on the number of columns, but I find this less than ideal as well. When I experimented with using rows instead of columns, both row elements collapsed or expanded simultaneously, which was not the desired outcome. Please see the provided code snippet and design below. So, my question stands: Is there a more elegant and efficient solution to achieve this layout?
HTML
<div class="flex-grid">
@foreach($parents as $parent)
<div class="col">
<div class="header-group group-toggle" id="{{$parent->id}}">
<h4><a href="{{ url($parent->url()) }}">{{ $parent->name }}</a></h4>
<div class="chev-icon">
<i class="fas fa-chevron-right rotate"></i>
</div>
</div>
<div class="sub-group collapse in">
@include('group.child', $parent)
</div>
</div>
@endforeach
</div>
CSS
.flex-grid {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: flex-start;
align-content: center;
height: 1200px;
.col {
width: 50%;
}
}
Jquery
$('.group-toggle').on('click', function () {
if ( !$(this).next().hasClass('in')) {
$(this).parent().children('.collapse.in').collapse('hide');
}
$(this).next().collapse('group-toggle');
}
Design