Toggle Bootstrap button text on button click?

Question

I want to toggle the text on a button each time it\'s clicked, e.g. from \"Show more...\" to \"Show less...\".

I have a button that\'s used to expand or collapse a n

Answer 1

Thanks for your suggestions. You pointed me in the right direction but I ended up doing it slightly different. My solution uses a bit of CSS to tell what the "hidden" class means and then jQuery toggles this class on all SPAN elements:

HTML (similar to yours):

  Show more...
  Show less...

CSS:

.toggle-link .hidden {
  display: none;
}

Update: You don't need this bit of css if you're using bootstrap, as pointed out by George Hawkins

jQuery:

jQuery(".toggle-link").click(function() {
    jQuery(this).find("span").toggleClass("hidden");
    /* Add more logic here */
});

I'm not saying it's better per se but to me it looks a bit cleaner. Also, you could expand on this method by not hiding a text but changing it's color back and forth, etcetera.