title: Collapsible div - expand and collapse
body: <p>Help please! </p>
  
  <p>I'm creating a FAQs webpage where theres approx 50 questions. Therefore, I'm using collapsible divs so that the page isn't too long. Below is the code I've used so far.</p>
  
  <p>I'm wondering if its possible to have a hyperlink (e.g. /#question20) where I can jump to a particular div which is automatically expanded by clicking on the hyperlink?</p>
  
  <p>Also, what would be the best way of creating expand all / collapse all buttons?</p>
  
  <p>Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="panel-group" style="width: 70%; float: right; min-width: 300px;"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;&lt;strong&gt;&lt;a href="#collapse1" data-toggle="collapse"&gt;Question 1&lt;/a&gt;&lt;/strong&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="collapse1" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;Answer 1&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;&lt;strong&gt;&lt;a href="#collapse2" data-toggle="collapse"&gt;Question 2&lt;/a&gt;&lt;/strong&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="collapse2" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;Answer 2&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>