Bootstrap Collapse not Collapsing

javascript css twitter-bootstrap collapse
poshanniraula picture poshanniraula · Apr 9, 2014 · Viewed 133.6k times · Source

I am trying to create a collapsable component using Bootstrap. My code is this

The "Collapsible Group Item #1" when clicked should collapse the items in class "panel-body" but it doesn't there is no effect of click. I copied this code directly from Bootstrap documentation still it does not work. Can anyone figure out what is the problem?

Answer

MaiKaY picture MaiKaY · Apr 9, 2014

jQuery is required (if you're using Bootstrap 3 or 4) ;-)

DEMO

<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- THIS LINE -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>

<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="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit
            </div>
        </div>
    </div>
</div>

</body>
</html>

Related questions

Two Bootstrap nav menus at the same time

I like to know if its possible to have two nav's at the same time. Here is a JSFiddle with the bootstrap test with only the collapse JavaScript for the navbar. Both menus get expanded at the same time, is …

Read More
Bootstrap collapse has a jumpy transition

I have a problem with the transition of the bootstrap navbar. the collapse has a jumpy transition when the collapsing element has padding I googled this issue and it seems that the problem is the padding: .menu-menu-container{ padding: 100px 30px 60…

Read More
Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features. Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this …

Read More