<link rel="stylesh
            
            
            eet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>



<button class="btn1">click me</button>

<div class="mydiv">
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ipsa velit ipsum cumque error, iste molestias optio eius, hic libero quia commodi. Hic explicabo aliquid magnam laudantium odio voluptatem eos.
</div>






body { padding:50px;
  text-align: center;background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); height:100vh;
}

.mydiv {
  background-color: #009688;
  color: #fff;
  padding: 20px;
  max-width: 500px;
  margin: 20px auto;display: none;
  border: 5px solid #085d55;
}


.btn1{  background-color: #009688;
  color: #fff;
  border: none;
  text-transform: capitalize;
  padding: 6px 20px;
  border-radius: 45px;
  margin-top: 20px;}
$(document).ready(function(){  
  $(".btn1") .click(function(){       
    $(".mydiv") .slideToggle(500);    
  }); 
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.