title: Bootstrap panel-collapse collapses when you click on a link inside it is clicked
body: <p>In following HTML page, the <code>Heading 1</code> and <code>Heading 2</code> rightly collapse when page loads first time (since I'm using <code>class="panel-collapse collapse"</code>. Then <code>Collapse/Expand</code> works fine when user clicks on a <code>Heading</code>. But when a user clicks on a link inside a <code>Heading</code> under one heading, the heading collapses. I want it to stay it open when a link inside <code>Heading</code> is clicked. The Collapse/Expand behavior should only occur when user clicks on a Heading and not on clicking a link inside a Heading. I would prefer a solution wihtout using JavaSctipt. NOTE: I'm using it in an ASP.NET Core project with Bootstrap 3.0 - but that should not matter.</p>
  
  <pre><code>&lt;div class="panel-group"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a class="accordion-toggle" data-toggle="collapse" href="#ToolsID"&gt;Heading 1&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="panel-collapse collapse" id="ToolsID"&gt;
              &lt;div class="list-group"&gt;
                  &lt;a asp-controller="TestCtrl" asp-action="TestAction" class="list-group-item"&gt;Click Here&lt;/a&gt;
                  &lt;a href="#" class="list-group-item"&gt;Click Here&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a class="accordion-toggle" data-toggle="collapse" href="#ReportsID"&gt;Heading 2&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="panel-collapse collapse" id="ReportsID"&gt;
              &lt;div class="list-group"&gt;
                  &lt;a href="#" class="list-group-item"&gt;Click Here &lt;/a&gt;
                  &lt;a href="#" class="list-group-item"&gt;Click Here&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The <code>Source View html in the browser</code> looks as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;ASP.NET Core Test App&lt;/title&gt;    
          &lt;link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" /&gt;
          &lt;link rel="stylesheet" href="/css/site.css" /&gt;   
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container navbar navbar-inverse navbar-fixed-top text-center"&gt;
          &lt;img src="/images/nps.gif"&gt;&lt;img src="/images/nps_txt.gif"&gt;
      &lt;/div&gt;
      &lt;div class="container nav nav-pills" style="margin-top:4px;background-color:cornsilk;"&gt;
  
  The same content as in the &lt;div class="panel-group"&gt;....&lt;/div&gt; shown in the post example above
  
  &lt;script src="/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="/lib/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"&gt;&lt;/script&gt;
  
   &lt;script&gt;
     $('.list-group-item').click(function(e){ 
          e.stopPropagation();
      })
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>