2

I have this code right here. and as you can see the when the content collapse there is a flick right before collapse of the content. I need it to collapse smoothly.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div><br>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">Simple collapsible</button>
  <div id="demo2" class="collapse in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
aynber
  • 22,380
  • 8
  • 50
  • 63
Sarah Blo
  • 23
  • 3

1 Answers1

2

Wrap your content into 2 container div and remove br (or put br outside the container div)

<div class="container">
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">
    Simple collapsible
    </button>
    <div id="demo2" class="collapse in">Lorem ...</div>
</div>
<div class="container">
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">
    Simple collapsible
    </button>
    <div id="demo2" class="collapse in">Lorem...</div>
</div>

Example:

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

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  
  <div class="container">
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
    Simple collapsible
    </button>
    <div id="demo" class="collapse in">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="container">
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo2">
    Simple collapsible
    </button>
    <div id="demo2" class="collapse in">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>
    
</body>
</html>
EA-Lille
  • 561
  • 7
  • 21