Jquery slidedown toggle change button text and icon when clicked

Question

The slide down function is fine but i need to change both text and a font awesome icon in the button from 'open all questions (down icon)' to 'Close all questions (up icon)' when the button is clicked, then reverting to 'open all questions' on close. Thanks! [

$(document).ready(function(){
    
    $("#showNavBut").click(function() {
                $("#showNav").slideToggle();
        
                if ( $('#showNav').css('display').display == 'block' ) {
                  $('#showNavBut').html('Close all questions <i class="fas fa-chevron-up" aria-hidden="true"></i>'); // Change button text
          
                }
                else {
                  $('#showNavBut').html('Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i>'); // Change button text
                }
        
                });
    
    });

#showNav {display: none;}

<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="showNav">
                    <div class="#">
                        
            <a href="#">Confidence Household 1</a>
            <a href="#">Confidence Household 2</a>
            <a href="#">Confidence Household 3</a>
            <a href="#">Confidence-Household 3</a>
           
                    </div>
</div>
                
<button id="showNavBut" class="show-nav-but" style="width: auto;">Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i></button>

            </div>

]1

Answer 1

it looks like the problem is that you don't wait for showNav to take the block/none state, at the moment of pressing the button it has one state, but it takes some time to execute slideToggle, you can just use the callback function and change the state of the button after executing slideToggle

$(document).ready(function () {
    $("#showNavBut").click(function (event) {
        $("#showNav").slideToggle(500, function () {
      if ($('#showNav').is(':visible')) {
        $(event.currentTarget).html('Close all questions <i class="fas fa-chevron-up" aria-hidden="true"></i>');
      } else {
        $(event.currentTarget).html('Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i>');
      }
    });
    });
});

#showNav {
  display: none;
 }

<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="showNav">
  <div class="#">
    <a href="#">Confidence Household 1</a>
    <a href="#">Confidence Household 2</a>
    <a href="#">Confidence Household 3</a>
    <a href="#">Confidence-Household 3</a>
  </div>
</div>
                
<button id="showNavBut" class="show-nav-but" style="width: auto;">Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i></button>