<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <button id="toggle"> Toggle </button> <div id="element" class="box"> </div> </div> </div>

.box { background-color: blue; height: 100px; }

var element = document.getElementById("element"); element.style.transition = "all 0.4s ease" element.style.width = "0px"; var toggle = document.getElementById("toggle"); var toggleFunc = function() { if (element.style.width === "0px") { element.style.width = "100px"; } else { element.style.width = "0px"; } }; toggle.addEventListener("click", toggleFunc); document.addEventListener('DOMContentLoaded', toggleFunc, false);