I have an HTML button created and I want to toggle the text that is displayed in the button between two text using Javascript/JQuery. How do I do this?
Currently, I have:
<button onclick="showAll();" class="collapse-classes">
<span class="button-text">Show</span>
</button>
The button starts off by displaying "Show" and then switch to "Hide" when clicked and then switch to "Show" when clicked again and onward. I tried changing the value of the tag but it doesn't change the text displayed. Can anyone help with the script? thanks
Don't use onclick
. Just bind an event handler.
Here's something you can work with:
$('.collapse-classes').click(function() {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$this.text('Show');
} else {
$this.text('Hide');
}
});
Following your DOM tree
$('.collapse-classes').click(function() {
var span = $(this).find('span');
if(span.text() == "Show"){
span.text("Hide");
} else {
span.text("Show");
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.