title: Open a specific accordion with an anchor link
body: <p>EDIT:  This has been solved here:  <a href="https://stackoverflow.com/questions/50447803/open-a-specific-accordion-panel-with-an-external-anchor-link/50448207">Open a specific accordion panel with an external anchor link</a></p>
  
  <p>I am looping over the accordion (with Coldfusion) and it is showing the data and working fine.  I am trying to get any of the panels to open based on a link (page.cfm#collapse20).</p>
  
  <p>Here is the accordion code without any Coldfusion...</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-js lang-js prettyprint-override"><code>(function() {
      var searchTerm, panelContainerId;
      // Create a new contains that is case insensitive
      $.expr[':'].containsCaseInsensitive = function(n, i, m) {
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) &gt;= 0;
      };
  
      $('#accordion_search_bar').on('change keyup paste click', function() {
          searchTerm = $(this).val();
          $('#accordion &gt; .panel').each(function() {
              panelContainerId = '#' + $(this).attr('id');
              $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
              $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
          });
      });
  }());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container" 
      id="page_container"&gt;
      &lt;div id="accordion_search_bar_container"&gt;
          &lt;input type="search" 
              id="accordion_search_bar" 
              placeholder="Search"/&gt;
      &lt;/div&gt;
      &lt;div class="panel-group" 
          id="accordion" 
          role="tablist" 
          aria-multiselectable="true"&gt;
          &lt;div class="panel panel-success" 
              id="collapseOne_container"&gt;
              &lt;div class="panel-heading" 
                  role="tab" 
                  id="headingOne"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a role="button" 
                          data-toggle="collapse" 
                          data-parent="#accordion" 
                          href="#collapseOne" 
                          aria-expanded="true" 
                          aria-controls="collapseOne"&gt;
                      One
                      &lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseOne" 
                  class="panel-collapse collapse in" 
                  role="tabpanel" 
                  aria-labelledby="headingOne"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;p&gt;Pellentesque convallis dolor&lt;/p&gt;
                      &lt;p&gt;Enim at tincidunt magna dapibus vitae&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-primary" 
              id="collapseTwo_Container"&gt;
              &lt;div class="panel-heading" 
                  role="tab" 
                  id="headingTwo"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a class="collapsed" 
                          role="button" 
                          data-toggle="collapse" 
                          data-parent="#accordion" 
                          href="#collapseTwo" 
                          aria-expanded="false" 
                          aria-controls="collapseTwo"&gt;
                      Two
                      &lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseTwo" 
                  class="panel-collapse collapse in" 
                  role="tabpanel" 
                  aria-labelledby="headingTwo"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;p&gt;Vestibulum in laoreet nisi&lt;/p&gt;
                      &lt;p&gt;Sit amet placerat massa&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-danger" 
              id="collapseThree_Container"&gt;
              &lt;div class="panel-heading" 
                  role="tab" 
                  id="headingThree"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a class="collapsed" 
                          role="button" 
                          data-toggle="collapse" 
                          data-parent="#accordion" 
                          href="#collapseThree" 
                          aria-expanded="false" 
                          aria-controls="collapseThree"&gt;
                      Three
                      &lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseThree" 
                  class="panel-collapse collapse in" 
                  role="tabpanel" 
                  aria-labelledby="headingThree"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;p&gt;Curabitur sem eros tempor sit&lt;/p&gt;
                      &lt;p&gt;Amet nunc eget, gravida mollis&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Again, I am just looking for a solution for opening any one of the accordions using an anchored link.</p>
  
  <p>Please let me know if I need to provide more info and thank you for any help!</p>