CODEWITHSUNDEEP
javascripthtmlcss
craftdeer
craftdeer

Reputation: 1025

How to set transition when button is clicked and it changes from display 'none' to display 'block'

I am trying to make it so, that when a button is clicked like a toggle, the texts and everything below it move smoothly below it instead of suddenly moving it. An example of this is bootstrap navbar hamburger menu. When the menu is clicked in mobile view, the rest of the items under it move in a smooth manner to make room for the navbar items. Here are my codes in the snippet.

let box = document.querySelector("#box");
let seconddiv = document.querySelector("#seconddiv");
box.addEventListener("click", myfunc);
function myfunc() {
  if(seconddiv.style.display == "none") {
    seconddiv.style.display = "block";
  }
  else {
    seconddiv.style.display = "none"
  }
}
#box {
  height: 50px;
  width: 50px;
  background-color: red
}

#seconddiv {
  display: none;
}
<div id="box">
</div>
<div id="seconddiv">
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  </div>
<p>hello</p>

When I click the red box, the "hello" text moves instantly when the "seconddiv" is set to display. Is it possible to move "hello" smoothly like in bootstrap?

Upvotes: 0

Views: 76

Answers (2)

Omar Tanti
Omar Tanti

Reputation: 1448

display:none is not handled with transitions. But you can add a class to the button with javascript on click. And then give the button height:30px when it has class '.clicked'

#seconddiv {
    height: 0;
    transition: height 0.5s
}

#seconddiv.clicked{
    height: 30px;
}

You can work with width or opacity too instead of height, but the difference with opacity is that the element will still use the space even when set to opacity:0

Upvotes: 0

Ishpreet
Ishpreet

Reputation: 669

You can use jQuery for this purpose. jQuery can handle better and in easy way. Please include jQuery file for following jQuery code:

$('#box').click(function(){
    $('#seconddiv').slideToggle();
});

If you want more slow speed for displaying and hiding div on click, then pass "slow" parameter in slideToggle function.

$('#seconddiv').slideToggle("slow");

Upvotes: 1

Related Questions