CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
giofus
giofus

Reputation: 97

Bootstrap Accordion not collapsing?

I am having trouble with a bootstrap accordion. I would like the accordion to open a specific section and then close all other sections so to leave the focus only ever on one accordion box. I have a nested accordion also which I am thinking is causing some problems.

HTML

<div class="panel panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="brown panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1">
                           Accordion #1
                        </a>
                    </h4>
                </div>
                <div id="col_1" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel panel-default">
                            <div class="pink panel-heading">
                                <h4 class="panel-title" style="font-size: 14px;">
                                    <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_2" href="#col_2">
                                       Accordion #sub1 
                                    </a>
                                </h4>
                            </div>
                            <div id="col_2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="pink panel-heading">
                                <h4 class="panel-title" style="font-size: 14px;">
                                    <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_3" href="#col_3">
                                        Accordion #sub2
                                    </a>
                                </h4>
                            </div>
                            <div id="col_3" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="pink panel-heading">
                                <h4 class="panel-title" style="font-size: 14px;">
                                    <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_4" href="#col_4">
                                      Accordion #sub3
                                    </a>
                                </h4>
                            </div>
                            <div id="col_4" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="brown panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7">
                               Accordion #2 
                            </a>
                        </h4>
                    </div>
                    <div id="col_7" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="brown panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8">
                               Accordion #3
                            </a>
                        </h4>
                    </div>    
                    <div id="col_8" class="panel-collapse collapse">
                         <div class="panel-body">
                            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
                         </div>
                    </div>
                </div>

Upvotes: 3

Views: 32484

Answers (3)

Robert
Robert

Reputation: 6967

Your child Accordion items aren't collapsing because you're setting data-parent to their own individual boxes. If you apply an ID of accordion-sub to .panel-body and then change your data-parent to match you'll achieve something functional.

http://www.bootply.com/fceay0SjKE

Upvotes: 7

Mohammad Usman
Mohammad Usman

Reputation: 39382

In your markup, div elements are not closing properly. And 2nd data-parent attribute of inner accordion is also incorrect. I've closed them properly and accordion is working.

Read more about Bootstrap Accordion Example and apply it carefully.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="brown panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1">
          Accordion #1
        </a>
      </h4>
    </div>
    <div id="col_1" class="panel-collapse collapse in">
      <div class="panel-body">
        <div class="panel-group" id="accordion-inner" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="pink panel-heading">
            <h4 class="panel-title" style="font-size: 14px;">
              <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_2">
                Accordion #sub1 
              </a>
            </h4>
          </div>
          <div id="col_2" class="panel-collapse collapse">
            <div class="panel-body">
              <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="pink panel-heading">
            <h4 class="panel-title" style="font-size: 14px;">
              <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_3">
                Accordion #sub2
              </a>
            </h4>
          </div>
          <div id="col_3" class="panel-collapse collapse">
            <div class="panel-body">
              <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="pink panel-heading">
            <h4 class="panel-title" style="font-size: 14px;">
              <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_4">
                Accordion #sub3
              </a>
            </h4>
          </div>
          <div id="col_4" class="panel-collapse collapse">
            <div class="panel-body">
              <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
      <div class="brown panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7">
            Accordion #2 
          </a>
        </h4>
      </div>
      <div id="col_7" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        </div>
      </div>
    </div>
  <div class="panel panel-default">
      <div class="brown panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8">
            Accordion #3
          </a>
        </h4>
      </div>    
      <div id="col_8" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        </div>
      </div>
    </div>
</div>

Upvotes: 2

CodingSince007
CodingSince007

Reputation: 13

Do you have the following scripts and styles in your code?

Put these in the of your HTML or add wherever you need to and it should work like a charm. I tested on my local by having all that code, the bootstrap code really helps it along!

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
 $( function() {
 $( "#accordion" ).accordion();
  } );
</script>

Upvotes: -2

Related Questions