Bootstrap accordion Collapse not working as expected when the panel is not directly under panel-group

1
votes

I have used bootstrap accordion with 3 static panels and a dynamic panel that is added by an Angular Selector. Due to the Selector, an extra div is wrapping the fourth panel, hence the panel is no longer directly under panel-group. So the collapsing works for the 3 static panels but not for the dynamically added panel in accordion : To elaborate, after expanding the fourth panel, when I try clicking on any of the first three panels, the fourth panel doesn't collapse.

I have replicated my problem in this tryit editor link.

I know one dirty way to solve the problem would be to use jquery and manually make the accordions collapse. Is there any better way?

Update: Here is an updated link , where the dynamic generated content has two panels wrapped by the extra div. As before, the accordion behavior is not working properly for panel 4 and panel 5.

2
jqueryhtmltwitter-bootstrapaccordion
You mentioned "Angular Selector" so where is your angular code? – Anand G
Angular code was irrelevant in this case, so I did not add @AnandG It renders the panel if a condition is satisfied. And other functionalities are specific to the panel, nothing to do with how accordion works – supernova
@AnandG , it is NOT working fine. You can see the behavior issue if you click on panel 4, then on any other panel, the panel 4 does not collapse. As I've mentioned in the question as well. – supernova

2 Answers

1
votes

I don't sure about the result , may be it could help.

Add this class panel panel-default to you dynamic generated parent. And try not add this tag in your dynamic content and also one closing tag </div>.

If this correct there is no longer extra div tag in your dynamic content.

enter image description here

0
votes

Try below, if that works for you.

$(document).ready(function() {

  $(".handleCollapse").click(function() {

    if ($("#collapse4").hasClass('in')) {
      $("#collapse4").removeClass('in');
    }

  });

});
.collapseToggle {
  height: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Collapse</h2>
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="handleCollapse">Collapsible Group 1</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="handleCollapse">Collapsible Group 2</a>
          </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="handleCollapse">Collapsible Group 3</a>
          </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
      <div>
        <!-- This DIV is added because of Angular Selector -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" id="collapse4Toggle">Collapsible Group 4</a>
            </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

PS: I did try doing it using jQuery and may not be good for Angular.

Hope this helps