title: Restricting a collapsible item to stay collapsed based on a certain click
body: <p>I have collapsible anchor tag (<strong>data_1</strong>) which when clicked toggles between collapsing and expanding a div element as shown below - </p>
  
  <pre><code>&lt;a href="#href1" class="list-group-item"
  data-toggle="collapse" aria-expanded="false"&gt; 
  &lt;i class="glyphicon glyphicon-folder-close"&gt;&lt;/i&gt;
  data_1
  &lt;span id="id_2" class="glyphicon glyphicon-eye-open"&gt;
  &lt;/span&gt;
  &lt;/a&gt;
  &lt;div class="list-group collapse" id="href1"&gt;
     &lt;a href="#href2"&gt;data_2&lt;/a&gt; 
     &lt;a href="#href2"&gt;data_3&lt;/a&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>It works as expected. But I want to add in some other functionality such that when I click the span element (<strong>glyphicon-eye-open</strong>) inside the collapsible anchor tag, a javascript method must be invoked. </p>
  
  <p>I know that by adding onclick = function1() inside the span element does the trick, but it also does the expansion of the collapsible anchor tag. I don't want the anchor element to be expanded when I click the span element only. 
  How do I achieve this? Any help would be appreciated. </p>
  
  <p>JS Fiddle: <a href="https://jsfiddle.net/joshirohit66/v81gofLq/11/" rel="nofollow noreferrer">https://jsfiddle.net/joshirohit66/v81gofLq/11/</a></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>window.clickme = function() {
    alert("clicked span but not anchor");
    return false;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
  }
  
  .list-group.list-group-root .list-group {
    margin-bottom: 0;
  }
  
  .list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
  }
  
  .list-group.list-group-root&gt;.list-group-item:first-child {
    border-top-width: 0;
  }
  
  .list-group.list-group-root&gt;.list-group&gt;.list-group-item {
    padding-left: 30px;
  }
  
  .list-group.list-group-root&gt;.list-group&gt;.list-group&gt;.list-group-item {
    padding-left: 45px;
  }
  
  .list-group-item .glyphicon {
    margin-right: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
  &lt;div class="list-group list-group-root well"&gt;
  
    &lt;a href="#href1" class="list-group-item" data-toggle="collapse" aria-expanded="false"&gt;
      &lt;i class="glyphicon glyphicon-folder-close"&gt;&lt;/i&gt; data_1
      &lt;span id="id_2" class="glyphicon glyphicon-eye-open" onclick="return clickme();"&gt;
        &lt;/span&gt;
    &lt;/a&gt;
    &lt;div class="list-group collapse" id="href1"&gt;
  
      &lt;a href="#item-1-1" class="list-group-item" data-toggle="collapse"&gt;
        &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1.1
      &lt;/a&gt;
  
      &lt;a href="#item-1-2" class="list-group-item" data-toggle="collapse"&gt;
        &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1.2
      &lt;/a&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>