title: Twitter Bootstrap expanding text using the "Collapse" plugin
body: <p>Has anyone figured out how to use <a href="http://twitter.github.com/bootstrap/javascript.html#collapse" rel="nofollow">twitter bootstrap collapse plugin</a> where some text is shown (say, 100 characters) and you click a button to expand the text to show the rest of it?</p>
  
  <p><a href="http://jsfiddle.net/trpeters1/VNdmZ/3/" rel="nofollow">Here's a JSFiddle that demonstrates the following issues I'm having</a>:</p>
  
  <ol>
  <li>The hidden text is shown on a <strong>new</strong> line. Would be preferable if sentences wouldn't be visually disrupted. </li>
  <li>the <code>icon-plus-sign</code> indicator's display isn't toggled (doesn't go away on showing hidden text and re-appear vice versa).</li>
  </ol>
  
  <p>Fully working HTML:</p>
  
  <pre><code>&lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
  &lt;script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="" data-toggle="collapse" data-target="#div1" &gt;
       &lt;span&gt;&lt;b&gt;Div1:&lt;/b&gt; This is a sentence at the end of the first 100 characters that gets truncated &lt;/span&gt;
   &lt;i class='icon-plus-sign'&gt;&lt;/i&gt; 
  &lt;/div&gt;
  &lt;div id="div1" class="collapse" &gt;such that characters 101 to infinity are not shown inline with the beginning of the sentence (&lt;b&gt;Div1&lt;/b&gt;).&lt;/div&gt;
  
  &lt;div class="" data-toggle="collapse" data-target="#div2" &gt;
   &lt;span&gt;&lt;b&gt;Div2:&lt;/b&gt;This is a sentence at the end of the first 100 characters that gets truncated &lt;/span&gt;
   &lt;i class='icon-plus-sign'&gt;&lt;/i&gt; 
  &lt;/div&gt;
  &lt;div id="div2" class="collapse" &gt;such that characters 101 to infinity are not shown inline with the beginning of the sentence (&lt;b&gt;Div2&lt;/b&gt;).&lt;/div&gt;
  </code></pre>