Smooth Animation for Bootstrap 4 collapse

Question

I got what I'm looking for but the animation effect isn't smooth as it should. I understand that the animation would be better if I don't have padding but I need padding to get the design. How do I solve this problem?

JSFiddle DEMO

HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="block">
            <label class="checkbox"> This is my checkbox
              <input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
            </label>
            <div class="collapse" id="collapseExample">
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option one">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option two">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option three">
                  </div>
                </div>
              </div>
            </div>
      </div>
    </div>
  </div>
</div>

CSS:

.block {
  margin-top: 30px;
}
.collapse {
  background-color: #eee;
  padding: 30px 15px;
}

This is base on Bootstrap 4, the latest version.

Answer 1

I got it resolved. It's because I added the padding in parent div.

.block {
  margin-top: 30px;
}
.block__collapse {
  background-color: #eee;
  padding: 30px 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="block">
            <label class="checkbox"> This is my checkbox
              <input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
            </label>
            <div class="collapse" id="collapseExample">
            <div class="block__collapse">
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option one">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option two">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option three">
                  </div>
                </div>
              </div>
            </div>
            </div>
      </div>
    </div>
  </div>
</div>

Answer 2

When you set .collapse it first apply the bootstrap style of .collapse and after yours because that there is delay...

Use the id #collapseExample to style:

.block {
  margin-top: 30px;
}
#collapseExample{
  background-color: #eee;
  padding: 30px 15px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="block">
            <label class="checkbox"> This is my checkbox
              <input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
            </label>
            <div class="collapse" id="collapseExample">
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option one">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option two">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option three">
                  </div>
                </div>
              </div>
            </div>
      </div>
    </div>
  </div>
</div>

EDIT to your comment!

There's a "drag" when it closes.

Use jquery onclick the checkbox and apply padding as below: fiddle here

$('.checkbox').on('click', function(){
if($('.collapse.show').length>0)
    $('.collapse').css('padding','0');
else
    $('.collapse').css('padding','30px 15px');
    
});

.block {
  margin-top: 30px;
}
#collapseExample{
  background-color: #eee;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="block">
            <label class="checkbox"> This is my checkbox
              <input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
            </label>
            <div class="collapse" id="collapseExample">
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option one">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option two">
                  </div>
                  <div class="form-group">
                    <input type="number" class="form-control" placeholder="option three">
                  </div>
                </div>
              </div>
            </div>
      </div>
    </div>
  </div>
</div>