隐藏div中的溢出元素在使用jQuery

Question

很抱歉，如果之前有人问这个问题。我已经尝试找到解决方案，但没有发现任何与我的问题有关的内容。

我使用jQuery来实现show / hide div。然后我发现隐藏div中的溢出元素在单击show toggle后无法正常显示。

请参阅下面的图片。

这是问题所在：

预期的解决方案：

＆＃13;

＆＃13;

$(function() {
  $('#btnStart').on('click', function() {
    $('#socmedInstagram').slideDown();
  });
});

＆＃13;

.container-tombol {
position: relative;
width: 50%;
height: auto;
}

.tombol-merah1 {
background-image: url('img/lucky-draw-circle.png');
background-size: 80px;
position: absolute;
top: -50px;
bottom: -50px;
left: -30px;
right: -30px;
margin: 10px 10px 10px 10px;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
width: 250px;
}

.continue-div {
text-align: center;
margin: 5% 0;"
}

.container-title {
text-align: center;
position: relative;
width: 50%;
height: auto;
}

 .title-bar1 {
 background-image: 
 url('img/lucky-draw-title-bar-
 instagram.png');
 background-size: 100%;
 position: absolute;
 top: -40px;
 bottom: -40px;
 left: -170px;
 right: -170px;
 margin: 10px 10px 10px 10px;
 background-repeat: no-repeat;
 z-index: 1;
 pointer-events: none;
 width: 330px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<button class="btn btn-success" id="btnStart">Start Now!</button>
<div class="row" id="socmedInstagram" style="display: none;">
  <div class="container-tombol">
    <div class="tombol-merah1">
      <h1 style="margin: 0 auto; font-family: 'Airstrike'; color: white; font-size:50px; position: absolute; left: 25px; right: 25px; top: 8px; bottom: 8px;">1</h1>
    </div>
  </div>
  <div class="container-title">
    <div class="title-bar1">
      <h1 style="margin: 0 auto; font-family: 'BigNoodleTitling'; text-shadow:  0px 0px 2px rgba(0,0,0,0.5); font-weight: 200; font-style: oblique; color: white; font-size:28px; position: absolute; left: 20px; right: 20px; top: 13px; bottom: 13px;">
        <i class="fab fa-instagram"></i> &nbsp;Follow My Instagram</h1>
    </div>
  </div>
  <div class="col-md-12">
    <div class="card" style="border: 0;">
      <div class="card-block" style="padding: 25px;">
        <div class="continue-div">
          <h1 style="font-size: 33px; font-family: 'BigNoodleTitling'; font-style: Oblique;">Thank you for Following us on Instagram!</h1>
          <button class="btn btn-danger" id="btnContinueInstagram">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我非常感谢任何可以帮助我的解决方案。我可以知道你们是否有更好的方法来做这样的事情。非常感谢先生！