Bootstrap Accordion not collapsing?
<p>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.</p>

<p>HTML</p>

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