admin管理员组

文章数量:1415467

I've been trying to make a collapse accordion to work, but when i click the links nothing happens, the other items are not expanding and the first is not collapsing. The body is split in 3 columns (1-10-1) and the accordion is placed in the middle. I'm using bootstrap 3.3.7 and jquery 3.2.1. Is this happening due to how my tags are laid, or is something to do with jquery?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src=".2.1/jquery.min.js"></script>
</head>
<body>

    <!-- Body -->
    <div class="container">

        <div  class="row">

            <div class="col-lg-1"></div>
            <div class="col-lg-10">

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading1">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                    Panel 1
                                </a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
                            <div class="panel-body">
                                <p>Text for 1</p>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading2">
                            <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                    Panel 2
                                </a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                            <div class="panel-body">
                                <p>Text for 2</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-1"></div>

        </div>

    </div> <!-- Body -->

</body>
</html>

I've been trying to make a collapse accordion to work, but when i click the links nothing happens, the other items are not expanding and the first is not collapsing. The body is split in 3 columns (1-10-1) and the accordion is placed in the middle. I'm using bootstrap 3.3.7 and jquery 3.2.1. Is this happening due to how my tags are laid, or is something to do with jquery?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

    <!-- Body -->
    <div class="container">

        <div  class="row">

            <div class="col-lg-1"></div>
            <div class="col-lg-10">

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading1">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                    Panel 1
                                </a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
                            <div class="panel-body">
                                <p>Text for 1</p>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading2">
                            <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                    Panel 2
                                </a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                            <div class="panel-body">
                                <p>Text for 2</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-1"></div>

        </div>

    </div> <!-- Body -->

</body>
</html>

  • javascript
  • jquery
  • html
  • css
  • twitter-bootstrap
Share Improve this question edited Jul 2, 2017 at 9:37 Kourvanas Kourvana asked Jul 2, 2017 at 9:31 Kourvanas KourvanaKourvanas Kourvana 331 silver badge5 bronze badges 6
  • It looks like its working just fine – Chiller Commented Jul 2, 2017 at 9:35
  • your code works fine jsbin./bodubuwoho/edit?html,output – Nirmal Dey Commented Jul 2, 2017 at 9:36
  • Add jQuery lib at first. – Ataur Rahman Munna Commented Jul 2, 2017 at 9:37
  • Indeed in jsbin works fine. I'm trying on both safari and chrome and does not work. What else can i try? – Kourvanas Kourvana Commented Jul 2, 2017 at 9:38
  • @AtaurRahmanMunna you are a lifesaver. Didn't know that! Thanks – Kourvanas Kourvana Commented Jul 2, 2017 at 9:39
 |  Show 1 more ment

1 Answer 1

Reset to default 3

Add jQuery lib before bootstrap.js. Because bootstrap internally uses jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>

    <!-- Body -->
    <div class="container">

        <div  class="row">

            <div class="col-lg-1"></div>
            <div class="col-lg-10">

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading1">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                    Panel 1
                                </a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
                            <div class="panel-body">
                                <p>Text for 1</p>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading2">
                            <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                    Panel 2
                                </a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                            <div class="panel-body">
                                <p>Text for 2</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-1"></div>

        </div>

    </div> <!-- Body -->

</body>
</html>

本文标签： javascriptBootstrap accordion not workingStack Overflow

版权声明：本文标题：javascript - Bootstrap accordion not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745230966a2648820.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。