title: Toggle specific column in two-colum layout?
body: <p>Using CSS Flexbox I created a two-column layout that toggle's columns independent of each other. That's what I want. However, the way I did it just feels so impractical, because I need to set the height of the container in order to wrap the items in a two-column layout. I could ofcourse calculate the height based on number of columns, but yeah.. When I tried using row, both columns in the row collapsed/expanded. See code &amp; design below. So, my question; is there a more elegant solution to this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="flex-grid"&gt;
     @foreach($parents as $parent)
        &lt;div class="col"&gt;
           &lt;div class="header-group group-toggle" id="{{$parent-&gt;id}}"&gt;
              &lt;h4&gt;&lt;a href="{{ url($parent-&gt;url()) }}"&gt;{{ $parent-&gt;name }}&lt;/a&gt;&lt;/h4&gt;
                   &lt;div class="chev-icon"&gt;
                      &lt;i class="fas fa-chevron-right rotate"&gt;&lt;/i&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
          &lt;div class="sub-group collapse in"&gt;
                @include('group.child', $parent)
          &lt;/div&gt;
       &lt;/div&gt;
     @endforeach
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flex-grid {
     display: flex;
     flex-flow: column wrap;
     align-items: center;
     justify-content: flex-start;
     align-content: center;
     height: 1200px;
  
     .col {
       width: 50%;
     }
  }
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$('.group-toggle').on('click', function () {
      if ( !$(this).next().hasClass('in')) {
          $(this).parent().children('.collapse.in').collapse('hide');
      }
  
      $(this).next().collapse('group-toggle'); 
  }
  </code></pre>
  
  <p><strong>Design</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Q8hiM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q8hiM.png" alt="enter image description here"></a></p>