Button toggle class
HTML
<button type="button" class="clickBtn">Click Me</button>
<div class="hiddenDiv"> This is the hidden text. </div>
CSS
button {
background-color: green;
}
button.btnWorking {
background-color: red;
}
JavaScript
var asyncData = false;
$('.hiddenDiv').hide();
$(".clickBtn").click( function(evt) {
if ( $(this).hasClass('btnWorking') ) {
$(this).removeClass('btnWorking');
$('.hiddenDiv').hide();
} else {
$(this).addClass('btnWorking');
$('.hiddenDiv').show();
if (!asyncData) {
$.ajax({
url: '/echo/html/',
data: {
html: '<p>This is the ajax HTML</p>',
delay: 2
},
method: 'post'
}).done( function(data) {
asyncData = data;
$('.hiddenDiv').append(data);
});
}
}
});