<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 ---------->
<body>
<div class="drop-down">
<div class="one">
<span>Do you know</span>
<div></div>
</div>
<div class="two">
<span>In this huge, big universe</span>
<span>Unlike apps</span>
</div>
<div class="three">
<span>There is only</span>
</div>
<section>
<p>ONE VERSION OF YOU THAT EXIST.</p>
</section>
</div>
<div class="pull-down">
<span class="pull"></span>
<div class="curve">
<span></span>
<span></span>
</div>
<span class="text">Feeling down? Click Me!!!</span>
</div>
</body>
var pull = document.querySelector("span.pull");
var curve = document.querySelector("div.curve");
var text = document.querySelector("span.text");
var drop_down = document.querySelector("div.drop-down");
var section = document.querySelector("section");
var section_p = section.querySelector("p");
var drop_down_kids = Array.from(document.querySelectorAll(".drop-down > div"));
pull.addEventListener("click", function(){ pullDown(); });
curve.addEventListener("click", function(){ pullDown(); });
text.addEventListener("click", function(){ pullDown(); });
section.addEventListener("click", function(){
drop_down.style.height = "0%";
//Remove animation classes from children and the other
drop_down_kids[0].classList.remove("classforone");
drop_down_kids[1].classList.remove("classfortwo");
drop_down_kids[2].classList.remove("classforthree");
section_p.classList.remove("fade");
});
function pullDown(){
drop_down.style.height = "100%";
//Add animation classes to children and the other
drop_down_kids[0].classList.add("classforone");
drop_down_kids[1].classList.add("classfortwo");
drop_down_kids[2].classList.add("classforthree");
section_p.classList.add("fade");
}
