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  aria-hidden="true"></i>'); // Change button text
          
                }
                else {
                  $('#showNavBut').html('Open all questions <i  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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

]1

CodePudding user response：

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  aria-hidden="true"></i>');
      } else {
        $(event.currentTarget).html('Open all questions <i  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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>