Is it possible for jQuery slideDown() function to apply display:flex property instead of display:block?

Please try the following start callback:

$(".item").slideDown({
  start: function () {
    $(this).css({
      display: "flex"
    })
  }
});

Here are two potential ways you can achieve what you discuss.

Option 1

One method to achieve this is to wrap the element within a div and give the wrapper div a class with the display: flex property.

e.g (assuming your HTML structure is along these lines based on your BEM CSS):

<nav class="nav" class="nav___item"> 
  <div class="nav__item">
    <div style="display: flex">
      <div class="nav__item__account-dropdown--open">
        ...
      </div>
    </div>
  </div>
</nav>

Option 2

Alternatively you could overwrite the function with an anonymous callback function, like so:

$('.nav__item__account-dropdown--open').slideUp(500, function() { 
  $(this).css('display', 'flex');
});

I don't know if this is a newer behaviour, but in jQuery 3.2 at least, if the element has an inline style of display:none, jQuery removes this property rather than add a new display property on slideUp(), slideToggle() etc.

So, if you set your element to display:flex in the CSS, and then apply display:none either inline using a style tag on the element, or with something similar to the below immediately on page load:

$('.element').css('display', 'none');

Then when you use slideDown() etc, you'll be left with a visible element with the correct display property.

If your element should only be hidden at a certain screen size, you can run the code to hide the element within an if statement based on screen width, eg

if( $(window).width() < 600){
    $('.element').css('display', 'none');
}

This has the potential disadvantage of the element briefly being shown until the page finishes loading, but if you're going to allow the element to be shown later on I wouldn't think this would be a big deal. You could also use something like slideUp() to initially hide the element, so it animates away nicely.

Tags:

Css

Jquery