Changing font awesome icon onclick function
function arata_ascunde(button) {
var x = $('#showhide');
$(button).find('i').remove();
if ($(button).text().trim() == 'Show') {
$(button).html($('<i/>',{class:'fa fa-eye-slash'})).append(' Hide');
x.fadeIn();
}
else {
$(button).html($('<i/>',{class:'fa fa-eye'})).append(' Show');
x.fadeOut();
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="arata_ascunde(this);" style="align:right;font-size:13px"
class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;">
<i class="fa fa-eye"></i> Show
</button>
<div id="showhide" style="background-color:red;width:100px;height:100px;margin:10px;display:none;"></div>document.querySelector('button').addEventListener('click', function() {
const icon = this.querySelector('i');
const text = this.querySelector('span');
if (icon.classList.contains('fa-eye')) {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
text.innerHTML = 'Hide';
} else {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
text.innerHTML = 'Show';
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button><i class="fa fa-eye"></i> <span>Show</span></button>Since you have inserted Jquery. You can do this via Jquery easily.
<button style="align:right;font-size:13px" class="btn btn-info" id="show_hide_bt" style="background-color:#00b0ff;"><i
class="fa fa-eye"></i> Show</button>
Now Jquery code for this is
$("#show_hide_bt").click(function(event) {
$(this).find('i').toggleClass('fa-eye-slash');
});
If you want to remove the fa-eye class then you can chain another toggleClass or add this again
$(this).find('i').toggleClass('fa-eye');
Or add this in single line. Comment if this doesnot help
$(this).find('i').toggleClass('fa-eye-slash').toggleClass('fa-eye');