CODEWITHSUNDEEP
htmltwitter-bootstrap
Vatsal Shrivastav
Vatsal Shrivastav

Reputation: 1

Bootstrap Collapse <div> doesn't close back smoothly

I have used certain images in Collapsible div. Initially when I click the Display button, images are displayed with a smooth scrolling effect. But later on when I click the Display button again, the div with images collapses back but not with the previous smooth slideOut effect.

Here's my code:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Display</button>
        <div id="demo" class="collapse">
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 0

Views: 2695

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

Make the collapse also a Bootstrap row. Not only should columns always be in a row, it will make the collapsing transition more apparent.

<div class="container">
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Display</button>
  <div id="demo" class="row collapse">
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <img src="http://1.bp.blogspot.com/_L_49bG_P4Yg/S2tE0k0lm7I/AAAAAAAAAN4/o7H_C5SRFug/s400/steve-jobs-3g-iphone.jpg" class="img-responsive" alt="img1">
    </div>
  </div>
</div>

Demo: http://www.bootply.com/JiLo58P3zm

Upvotes: 4

Related Questions