Twitter Bootstrap Question posted in

Twitter bootstrap – Why this BootStrap accordion example can't work on my page?

I am pretty new in Twitter BootStrap and I have some problem trying to implement an accordion as shown in this official documentation example: http://getbootstrap.com/javascript/#collapse-example-accordion

I have just copy and paste the previous HTML code into my page and I see the accordion content but I obtain that the first panel is expanded and the other 2 panels are collapsed. The problem is that I can’t interact on these panels. If I click on the first one it is not collapsed and if I click on the 2-3 panels are not expanded.

So, thi is my page content:

<!DOCTYPE html>
<html>
<head>
<link href="<c:url value="resources/css/style.css" />" rel="stylesheet">

<link href="<c:url value="resources/css/bootstrap.css" />" rel="stylesheet">
<link href="<c:url value="resources/css/bootstrap-theme.css" />" rel="stylesheet">

<script src="<c:url value="resources/js/bootstrap.js" />"></script>

<title>Home</title>
</head>

<body>

    <section>
    <div class="container alignLeft">

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a role="button" 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" role="button" 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" role="button" 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>
        </div>

    </section>

</body>
</html>

As you can see I have correctly included the bootstrap.css file and the bootstrap.js file.

What am I missing? How can I fix this issue and obtain a working accordion?

Tnx

Tags:

2

Answers


  1. 0

    Need to include the actual jQuery library in your code.

    Put this in your head :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    Login or Signup to reply.
  2. 0

    First of all you have to include script for
    jQuery (feature-rich JavaScript library) before bootstrap’s script for making anything work with bootstrap.

    Here is how you can make it working by including latest version of jQuery before bootstrap’s script.

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="<c:url value="resources/js/bootstrap.js" />"></script>

    You might also want to check if you want to make entire panel clickable or just the heading part in the title which is the current case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search