0

I am using bootstrap v4 in my project so I am trying out the flex layout stuff (which has been great so far!), however I am running into an issue where I have a row that I want to toggle open/closed.

Right now I am just toggling between display: none and display: flex;

Here is an example fiddle - https://jsfiddle.net/LL0qnnxm/35/

and my code looks like -

HTML-

<div class="container">
  <div class="refinement-bar-row">
    <div class="row refinement-bar title-bar">
      <div class="col-12 for-you">
        <p class="toggle-refine-bar">
          click me to toggle
        </p>
        text
      </div>
    </div>
    <div class="refinement-bar filters-bar">
      <div class="row">
        <div class="col-12">

          test
        </div>
        <div class="col-12">

          test
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

 .filters-bar {
   display: none;
   margin-top: 2rem;
 }

 .open {
   .filters-bar {
     display: flex;
   }
 }

a little jquery to toggle the open class :

$(".title-bar").click(function() {
  console.log("clicked");
  $('.refinement-bar-row').toggleClass("open");
});

I tried the swapping the CSS like so :

.filters-bar {
   height: 0;
   display: flex;
   margin-top: 2rem;
   transition: all 0.5s;
 }

 .open {
   .filters-bar {
     height: auto;
     display: flex;
   }
 }

but in the "closed" state you can still see the closed drawer. I'm not sure how you are suppose to accomplish this with flex.

Here is a fiddle with the non working height: 0 to height: auto - https://jsfiddle.net/LL0qnnxm/34/

Any ideas how to animate the flex drawer? I am trying to get it to slide down open (and up closed) if this helps. Any tips welcome, thanks for reading!

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
  • @Michael_B those duplicate answers work if this was display:block, however I am seeing the issue with display: flex. i.e. the drawer container is full height and does not collapse. – ajmajmajma Apr 04 '17 at 13:02
  • Can you post a revised fiddle that clarifies the problem? Maybe use borders for a better illustration. – Michael Benjamin Apr 04 '17 at 13:57

0 Answers0