Software Ninja Software Ninja - 5 months ago 27
HTML Question

BootStrap Accordion Panel

i am trying to build Accordion Panel using Bootstrap. But when i am clicking on the link, it doesnt collapse. I am not sure what is the problem. The Bootstrap.css, i downloaded it from the official bootstrap website. here is my code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Accordion</h2>
<hr/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#section1">
Question1
</a>
</h4>
</div>
<!-- End of heading -->
<div class="panel-collapse collapse in" id="section1">
<div class="panel-body">
This is the body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


Any help will be greatly appreciated. Thanks.

Answer

the code is good but you are missing Jquery and Bootstrap js

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>Accordion</h2>
          <hr/>
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#section1">
                    Question1
                  </a>
                </h4>
              </div>
              <!--  End of heading -->
              <div class="panel-collapse collapse in" id="section1">
                <div class="panel-body">
                  This is the body
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

see the updated jsfiddle here https://jsfiddle.net/pup3xtto/