jQuery addClass example

Change class name on click in jQuery

by Viktor

HTML

<div class="wrapper">
  <div class="left">
  <button id="leftbutton">
    Min lilla knapp
  </button>
  </div>
  <div class="right">
  ert
  </div>
</div>

CSS

.wrapper{
  display:flex;
  flex-direction:row;
  background-color:black;
  width:100%;
  height:100%;
  color:white;
  justify-content: space-between;
}

.right{
  height:200px;
  background-color:red;
  overflow:hidden;
}

.zeroheight{
  height:0px;
  transition: height 0.5s;
}

JavaScript

$(function(){
  // find elements
  var right = $(".right")
  var button = $("#leftbutton")

  // handle click and add class
  button.on("click", function(){
    right.addClass("zeroheight") 
  })
})