title: bootstrap accordion trigger open/close from within
body: <p>I am trying to close a bootstrap panel from clicking a button nested inside. I know its possible, just cant reach the scope.I have calling the collapse class, I have tried showing and hiding it--any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( "#button1" ).click(function() {
  //close accordion 1 and open accordon 3
    $("#collapseTwo").collapse();
    $("#collapseThree").CollapseIn();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;div class="bs-example"&gt;
      &lt;div class="panel-group" id="accordion"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;1. What is HTML?&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;p&gt;HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. &lt;a id="button1"&gt;Learn more.&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;2. What is Bootstrap?&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;p&gt;Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. &lt;a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank"&gt;Learn more.&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt;3. What is CSS?&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;p&gt;CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. &lt;a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank"&gt;Learn more.&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>