title: How do I use jQuery fadeToggle() and CSS flexbox together?
body: <p>I’ve found some similar answers, but nothing specifically addressing my challenge.  I’m sure there’s a simple solution to my question, but I’m a newb with jQuery, so I apologize in advance if I'm being a chucklehead for asking it. </p>
  
  <p>That said…</p>
  
  <p>I have a basic content div with a <code>fadeIn()</code> effect handled by a button click. Currently the content div is styled with <code>flexbox</code> and looks fairly nice. What I’d like to do is to be able to toggle the content div with a fadeIn/fadeOut effect every time the user clicks the button. However, the jQuery fadeToggle() method doesn’t seem to play nice thanks to the flex value of the display property. In similar cases -- minus a toggle -- I’ve just changed the display value from none to flex by doing something like:</p>
  
  <pre><code>$(‘#someElement’).css(‘display’, ‘flex’).hide().fadeIn()
  </code></pre>
  
  <p>Clunky and probably wrong, but it works. Just not with <code>fadeToggle()</code>. Is there a better way to handle this or should I just skip <code>fadeToggle()</code> and use <code>fadeIn()/fadeOut()</code>? </p>
  
  <p>Thanks in advance for your help.</p>
  
  <p><a href="https://jsfiddle.net/zas823j2/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;style&gt;
  body {
      font-size: 16px;
      color: white;
      padding: 20px;
  }
  
  .about-btn {
      background: #0069a6;
      width: 135px;
      height: 35px;
      text-align: center;
      padding-top: 20px;
  }
  .about-wrapper {
      background: #0069a6;
      box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .45);
      position: absolute;
      bottom: 130px;
      height: 200px;
      width: 500px;
      display: none;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
  }
  .about {
      width: 80%;
      height: 50%;
      float: left;
      text-align: justify;
  }
  .about-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px; 
  }
  &lt;/style&gt;
  
  &lt;div class="about-btn"&gt;
    CLICK ME
  &lt;/div&gt;
  
  &lt;div class="about-wrapper"&gt;
    &lt;div class="about-close"&gt;
      &lt;span class="about-icon"&gt;X&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="about"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a auctor turpis. Aenean eleifend augue eget ex laoreet, eget cursus ante lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent dapibus enim nec nunc bibendum, quis consequat urna laoreet. 
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('.about-btn').on('click', function(){
    $('.about-wrapper').css("display", "flex").hide().fadeToggle();
  })
  
  $('.about-close').on('click', function() {
      $('.about-wrapper').fadeOut();
  });
  &lt;/script&gt;
  </code></pre>