Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time.
I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as context always refers to a single span.
My idea was to add a class to one of the spans after the ajax call is complete to hide it?
HTML
<button type="button" class="main-button" data-url={unfollowUrl}>
<span class="text1">Text 1</span>
<span class="text2">Text 2</span>
</button>
CSS
button {
border: none;
background-color: red;
width: 100px;
height: 50px;
}
button .hide-text {
display: none;
}
JS
$('button').click(function{
$.ajax({
url: url,
method: 'POST'
}).done(function() {
//toggling goes here
})
}
jsfiddle: https://jsfiddle.net/5rk99y6y/