title: Change Text in Anchor on Click (Twitter Bootstrap Theme)
body: <p>Tried so many different scripts to try to get this working have had to throw in the towel and ask. My JQuery set up is an external JS file which is referenced in the head section and I add JQuery Code to that file. Also have a Twitter Bootstrap theme which has its own classes and scripts. On this post <a href="http://skipology.com/iphoneography-applications-most-used/" rel="nofollow">http://skipology.com/iphoneography-applications-most-used/</a> I have created some expandable divs using the Twitter Bootstrap built in code / classes. The html for the anchor triggering the expanding and closing is:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;&lt;li class="active expandable"&gt;&lt;a role="button" tabindex="0" 
  data-toggle="collapse" data-target="#snapseed"&gt;&lt;i class="icon-sort icon-large"&gt;&lt;/i&gt; 
  More...&lt;/a&gt;&lt;/li&gt;&lt;ul&gt;
  </code></pre>
  
  <p>What I am trying to do is change the 'More...' text to 'Less...' when the div is expanded. I've tried various scripts including adding spans and using toggle() triggered by click or onclick but nothing seems to work. Twitter Bootstrap has various events I could use rather than click or onclick I think such as show: shown: hide: and hidden:</p>
  
  <p>I think the combination of JQuery, Wordpress and Bootstrap is confusing me totally. I know I could do this on a static site. Can anyone come up with a script?</p>