title: Toggle Bootstrap button text on button click?
body: <p>I want to toggle the text on a button each time it's clicked, e.g. from "Show more..." to "Show less...".</p>
  
  <p>I have a button that's used to expand or collapse a nearby block (see the <a href="http://getbootstrap.com/javascript/#collapse" rel="noreferrer">Collapse</a> section of the Bootstrap docs, click the example "Link with href" button there to see what I mean).</p>
  
  <p>The HTML for such a Bootstrap button looks like this:</p>
  
  <pre><code>&lt;a class="btn btn-primary" data-toggle="collapse" href="#collapseExample"&gt;
      See more...
  &lt;/a&gt;
  </code></pre>
  
  <p>When the related block is collapsed I want the button text to be e.g. "Show more..." and when it's expanded I want it to be e.g. "Show less...".</p>
  
  <p><strong>I've seen solutions that separate the button text off into jQuery, Javascript or CSS - but that makes it difficult to read the HTML</strong> (the button text is somewhere else entirely to the button) and also makes it more difficult to localize.</p>