title: Twitter Bootstrap button click to toggle expand/collapse text section above button
body: <p>I have recently come accross bootstrap and I am working on extending the hero example. I want to add the following behaviour to my page:</p>
  
  <p>When a button (i.e. an element with selector '.row .btn') is clicked on, I want to be able to toggle between expanding/collapsing the portion of text above the button.</p>
  
  <p>This is what the HTML looks like:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Test Page&lt;/title&gt;
      &lt;!-- Le styles --&gt;
      &lt;link href="../assets/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;style type="text/css"&gt;
        body {
          padding-top: 60px;
          padding-bottom: 40px;
        }
      &lt;/style&gt;
      &lt;link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="navbar navbar-fixed-top"&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
        &lt;div class="hero-unit"&gt;
          &lt;h1&gt;Hello, world!&lt;/h1&gt;
          &lt;p&gt;Blah, blah.&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-primary btn-large"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;!-- Example row of columns --&gt;
        &lt;div class="row"&gt;
          &lt;div class="span4"&gt;
            &lt;h2&gt;Heading&lt;/h2&gt;
             &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
            &lt;p&gt;&lt;a class="btn" href="#"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="../assets/js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-transition.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-alert.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-modal.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-dropdown.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-tab.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-button.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-collapse.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-carousel.js"&gt;&lt;/script&gt;
      &lt;script src="../assets/js/bootstrap-typeahead.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can hack this using jQuery, but maybe there is a way of doing it the Bootstrap way? - i.e. using the Bootstrap API?</p>