Bootstrap Accordion Tabs Not Opening

I am trying to implement a bootstrap accordion with collapsible group items. I have managed to make it display on my site, but the tabs aren't opening. I have linked bootstrap to my html file, added the required js scripts to the <head> and copied and pasted exactly the same code that the documentation offers here http://getbootstrap.com/javascript/#collapse

What am I missing?

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

edited Jan 2 at 2:25

Cœur

18.5k9110148

asked Feb 21 '15 at 10:14

user3086706

2

add your code here ...

– Nishit Maheta
Feb 21 '15 at 10:17

Hey @jQuery sorry there it is.

– user3086706
Feb 21 '15 at 10:23

Are there any error messages in the browser console? (Press F12 in most browsers to see it.) We have had issues like this caused by errors elsewhere in the Javascript code preventing the expand/collapse stuff from working correctly.

– GoBusto
Feb 21 '15 at 10:25

check error in console .. "Collapse requires the transitions plugin to be included in your version of Bootstrap." have you include this plugin ?

– Nishit Maheta
Feb 21 '15 at 10:26

Yep, I didn't declare de jquery script properly. I added it below the bootstrap CDN script instead of above. All gooood now.

– user3086706
Feb 21 '15 at 10:39

add a comment |

What am I missing?

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

edited Jan 2 at 2:25

Cœur

18.5k9110148

asked Feb 21 '15 at 10:14

user3086706

2

add your code here ...

– Nishit Maheta
Feb 21 '15 at 10:17

Hey @jQuery sorry there it is.

– user3086706
Feb 21 '15 at 10:23

Are there any error messages in the browser console? (Press F12 in most browsers to see it.) We have had issues like this caused by errors elsewhere in the Javascript code preventing the expand/collapse stuff from working correctly.

– GoBusto
Feb 21 '15 at 10:25

check error in console .. "Collapse requires the transitions plugin to be included in your version of Bootstrap." have you include this plugin ?

– Nishit Maheta
Feb 21 '15 at 10:26

Yep, I didn't declare de jquery script properly. I added it below the bootstrap CDN script instead of above. All gooood now.

– user3086706
Feb 21 '15 at 10:39

add a comment |

What am I missing?

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

edited Jan 2 at 2:25

Cœur

18.5k9110148

asked Feb 21 '15 at 10:14

user3086706

What am I missing?

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

javascript jquery html html5 twitter-bootstrap

edited Jan 2 at 2:25

Cœur

18.5k9110148

asked Feb 21 '15 at 10:14

user3086706

edited Jan 2 at 2:25

Cœur

18.5k9110148

asked Feb 21 '15 at 10:14

user3086706

edited Jan 2 at 2:25

Cœur

18.5k9110148

edited Jan 2 at 2:25

Cœur

18.5k9110148

edited Jan 2 at 2:25

Cœur

18.5k9110148

asked Feb 21 '15 at 10:14

user3086706

asked Feb 21 '15 at 10:14

user3086706

asked Feb 21 '15 at 10:14

user3086706

2

add your code here ...

– Nishit Maheta
Feb 21 '15 at 10:17

Hey @jQuery sorry there it is.

– user3086706
Feb 21 '15 at 10:23

Are there any error messages in the browser console? (Press F12 in most browsers to see it.) We have had issues like this caused by errors elsewhere in the Javascript code preventing the expand/collapse stuff from working correctly.

– GoBusto
Feb 21 '15 at 10:25

check error in console .. "Collapse requires the transitions plugin to be included in your version of Bootstrap." have you include this plugin ?

– Nishit Maheta
Feb 21 '15 at 10:26

Yep, I didn't declare de jquery script properly. I added it below the bootstrap CDN script instead of above. All gooood now.

– user3086706
Feb 21 '15 at 10:39

add a comment |

2

add your code here ...

– Nishit Maheta
Feb 21 '15 at 10:17

Hey @jQuery sorry there it is.

– user3086706
Feb 21 '15 at 10:23

Are there any error messages in the browser console? (Press F12 in most browsers to see it.) We have had issues like this caused by errors elsewhere in the Javascript code preventing the expand/collapse stuff from working correctly.

– GoBusto
Feb 21 '15 at 10:25

check error in console .. "Collapse requires the transitions plugin to be included in your version of Bootstrap." have you include this plugin ?

– Nishit Maheta
Feb 21 '15 at 10:26

Yep, I didn't declare de jquery script properly. I added it below the bootstrap CDN script instead of above. All gooood now.

– user3086706
Feb 21 '15 at 10:39

add your code here ...

– Nishit Maheta
Feb 21 '15 at 10:17

Hey @jQuery sorry there it is.

– user3086706
Feb 21 '15 at 10:23

Are there any error messages in the browser console? (Press F12 in most browsers to see it.) We have had issues like this caused by errors elsewhere in the Javascript code preventing the expand/collapse stuff from working correctly.

– GoBusto
Feb 21 '15 at 10:25

check error in console .. "Collapse requires the transitions plugin to be included in your version of Bootstrap." have you include this plugin ?

– Nishit Maheta
Feb 21 '15 at 10:26

Yep, I didn't declare de jquery script properly. I added it below the bootstrap CDN script instead of above. All gooood now.

– user3086706
Feb 21 '15 at 10:39

add a comment |

2 Answers
2

active

oldest

votes

Your code is working fine i think you didn't include your files correctly :

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

Link to jsffidle : http://jsfiddle.net/qs1aLxqc/

answered Feb 21 '15 at 10:27

Abdooapps

814

Yep, i didn't declare the jquery script properly, just figured it out

– user3086706
Feb 21 '15 at 10:34

If your website is online send us the link of the page to check the problem, if not put your html header with the list of script included.

– Abdooapps
Feb 21 '15 at 10:37

All good now. I updated my comments above. Thank you!

– user3086706
Feb 21 '15 at 10:40

That's good, you're welcome.

– Abdooapps
Feb 21 '15 at 10:45

add a comment |

Your code is fine here, the problem must be with the resources which may not be properly configured. please correct them bootstrap needs JQuery also.

edited May 4 '15 at 19:53

answered Feb 21 '15 at 10:28

Saubar

12011

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f28644597%2fbootstrap-accordion-tabs-not-opening%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Your code is working fine i think you didn't include your files correctly :

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

Link to jsffidle : http://jsfiddle.net/qs1aLxqc/

answered Feb 21 '15 at 10:27

Abdooapps

814

Yep, i didn't declare the jquery script properly, just figured it out

– user3086706
Feb 21 '15 at 10:34

If your website is online send us the link of the page to check the problem, if not put your html header with the list of script included.

– Abdooapps
Feb 21 '15 at 10:37

All good now. I updated my comments above. Thank you!

– user3086706
Feb 21 '15 at 10:40

That's good, you're welcome.

– Abdooapps
Feb 21 '15 at 10:45

add a comment |

Your code is working fine i think you didn't include your files correctly :

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

Link to jsffidle : http://jsfiddle.net/qs1aLxqc/

answered Feb 21 '15 at 10:27

Abdooapps

814

Yep, i didn't declare the jquery script properly, just figured it out

– user3086706
Feb 21 '15 at 10:34

If your website is online send us the link of the page to check the problem, if not put your html header with the list of script included.

– Abdooapps
Feb 21 '15 at 10:37

All good now. I updated my comments above. Thank you!

– user3086706
Feb 21 '15 at 10:40

That's good, you're welcome.

– Abdooapps
Feb 21 '15 at 10:45

add a comment |

Your code is working fine i think you didn't include your files correctly :

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

Link to jsffidle : http://jsfiddle.net/qs1aLxqc/

answered Feb 21 '15 at 10:27

Abdooapps

814

Your code is working fine i think you didn't include your files correctly :

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><!-- begin accordion -->

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingOne">

                  <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                      Collapsible Group Item #1

                    </a>

                  </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingTwo">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                      Collapsible Group Item #2

                    </a>

                  </h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

              <div class="panel panel-default">

                <div class="panel-heading" role="tab" id="headingThree">

                  <h4 class="panel-title">

                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

                      Collapsible Group Item #3

                    </a>

                  </h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                  <div class="panel-body">

                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                  </div>

                </div>

              </div>

            </div><!-- end accordion -->

Link to jsffidle : http://jsfiddle.net/qs1aLxqc/

answered Feb 21 '15 at 10:27

Abdooapps

814

answered Feb 21 '15 at 10:27

Abdooapps

814

answered Feb 21 '15 at 10:27

Abdooapps

814

answered Feb 21 '15 at 10:27

Abdooapps

814

Yep, i didn't declare the jquery script properly, just figured it out

– user3086706
Feb 21 '15 at 10:34

If your website is online send us the link of the page to check the problem, if not put your html header with the list of script included.

– Abdooapps
Feb 21 '15 at 10:37

All good now. I updated my comments above. Thank you!

– user3086706
Feb 21 '15 at 10:40

That's good, you're welcome.

– Abdooapps
Feb 21 '15 at 10:45

add a comment |

Yep, i didn't declare the jquery script properly, just figured it out

– user3086706
Feb 21 '15 at 10:34

If your website is online send us the link of the page to check the problem, if not put your html header with the list of script included.

– Abdooapps
Feb 21 '15 at 10:37

All good now. I updated my comments above. Thank you!

– user3086706
Feb 21 '15 at 10:40

That's good, you're welcome.

– Abdooapps
Feb 21 '15 at 10:45

Yep, i didn't declare the jquery script properly, just figured it out

– user3086706
Feb 21 '15 at 10:34

If your website is online send us the link of the page to check the problem, if not put your html header with the list of script included.

– Abdooapps
Feb 21 '15 at 10:37

All good now. I updated my comments above. Thank you!

– user3086706
Feb 21 '15 at 10:40

That's good, you're welcome.

– Abdooapps
Feb 21 '15 at 10:45

add a comment |

Your code is fine here, the problem must be with the resources which may not be properly configured. please correct them bootstrap needs JQuery also.

edited May 4 '15 at 19:53

answered Feb 21 '15 at 10:28

Saubar

12011

add a comment |

Your code is fine here, the problem must be with the resources which may not be properly configured. please correct them bootstrap needs JQuery also.

edited May 4 '15 at 19:53

answered Feb 21 '15 at 10:28

Saubar

12011

add a comment |

Your code is fine here, the problem must be with the resources which may not be properly configured. please correct them bootstrap needs JQuery also.

edited May 4 '15 at 19:53

answered Feb 21 '15 at 10:28

Saubar

12011

Your code is fine here, the problem must be with the resources which may not be properly configured. please correct them bootstrap needs JQuery also.

edited May 4 '15 at 19:53

answered Feb 21 '15 at 10:28

Saubar

12011

edited May 4 '15 at 19:53

answered Feb 21 '15 at 10:28

Saubar

12011

answered Feb 21 '15 at 10:28

Saubar

12011

answered Feb 21 '15 at 10:28

Saubar

12011

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk