title: Changing font awesome icon onclick function
body: <p>I'm trying to swap .fa-eye to fa-eye-slash when user click on a button. What am I doing wrong? It's not working.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;button onclick="arata_ascunde(this);" style="align:right;font-size:13px" 
  class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;"&gt;&lt;i 
  class="fa fa-eye"&gt;&lt;/i&gt; Show&lt;/button&gt;
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code> function arata_ascunde(button) {
       var x = document.getElementById('showhide');
       var change = document.getElementById("show_hide_bt");
  
       if (x.style.display === 'none') {
         x.style.display = 'block';
       } else {
         x.style.display = 'none';
       }
  
       if (change.innerHTML == ' Show')
              {
  
                  change.innerHTML = ' Hide';
                  $(button).find('i').toggleClass('fa-eye').toggleClass('fa-eye-slash');
              }
              else {
  
                  change.innerHTML = ' Show';
                  $(button).find('i').toggleClass('fa-eye-slash').toggleClass('fa-eye');
              }
  
  
    }
  </code></pre>