title: How to keep the bootstrap panel open on button click in body
body: <p>I have a collapsable panel in <code>bootstrap css</code> and have a <code>button</code> inside the panel body</p>
  
  <p>On click of that button i open a bootstrap modal</p>
  
  <p>Now the problem i am having is whenever i click on the button it opens the modal fine but it closes the panel</p>
  
  <p>I want to keep the panel open on click of the button</p>
  
  <p>I already tried <code>e.preventdefault()</code> </p>
  
  <p></p>
  
  <pre><code>&lt;div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0"&gt;
      &lt;div id="event-title" class="panel-heading event-heading"&gt;&lt;h4 class="panel-title"&gt;test&lt;/h4&gt;
  
          &lt;div class="pull-right"&gt;
              &lt;button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"&gt;&lt;i
                      id="i5" class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Check in
              &lt;/button&gt;
              &lt;span class="label label-default badge-round pull-right label-checkin"&gt;1 &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapse0" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div&gt;&lt;p&gt;test&lt;strong&gt;&amp;nbsp;description&lt;/strong&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button id="5" data-toggle="modal" data-target="#myModal" type="button"
                          class="btn btn-danger btn-sm location-btn center-block"&gt;&lt;span
                          class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;00 Piter Street, New South Wales,
                      Australia
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
       id="panel1" aria-expanded="false"&gt;
      &lt;div id="event-title" class="panel-heading event-heading"&gt;&lt;h4 class="panel-title"&gt;show jumping test 1&lt;/h4&gt;
  
          &lt;div class="pull-right"&gt;
              &lt;button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"&gt;&lt;i
                      id="i10" class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Check in
              &lt;/button&gt;
              &lt;span class="label label-default badge-round pull-right label-checkin"&gt;1 &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div&gt;&lt;p&gt;&lt;strong&gt;This is a very long description written&lt;span id="restOfArticle" style="display:none"&gt; just to test the word wrap and make it more compatible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks&lt;/span&gt;&lt;/strong&gt;
                  &lt;/p&gt;
                  &lt;a onclick="showMoreOrLess(this,&amp;quot;restOfArticle&amp;quot;)"&gt;..Read more&lt;/a&gt;&lt;/div&gt;
              &lt;div&gt;
                  &lt;button id="10" data-toggle="modal" data-target="#myModal" type="button"
                          class="btn btn-danger btn-sm location-btn center-block"&gt;&lt;span
                          class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;500 Piter Street, New South Wales,
                      Australia
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is <a href="http://jsfiddle.net/bhavuksuthar/R6EAW/2453/" rel="nofollow">jsfiddle demo</a>.. It not perfect but as you can see if i click on the button it closes the panel...</p>
  
  <p>I want to prevent the panel from closing
  What else can i do to keep the panel open???</p>
  
  <p>Thank you</p>