jQuery - pure toggle with jquery (double click or hide and show)

Question

HTML

<div id="brand-slide">
  <div id="brand-toggle">Click here</div>
  <div class="box">
  <img src="image.png"/>
  Content of the box goes here"
  <a href="/download-page" target="_blank" class="btn-slide">Download Now</a>
  </div>
</div>

 

JS

$('#brand-toggle').click(function () {
  // alert('hoi'); 
  if ($('#brand-slide').hasClass('in')) {
    $('#brand-slide').removeClass('in').addClass('out');
  }
  else {
    $('#brand-slide').removeClass('out').addClass("in");
  }  
});

 

CSS

#brand-slide {
  z-index: 999;
  position: fixed;
  background: #dcdfe6;
  color: #333;
  width: 260px; 
  text-align: center;
  bottom: 80px;
  right: -260px;
  height: 264px;
  transition: right 0.4s ease-in-out;
  -o-transition: right 0.4s ease-in-out;
  -ms-transition: right 0.4s ease-in-out;
  -moz-transition: right 0.4s ease-in-out;
  -webkit-transition: right 0.4s ease-in-out;
  .box {
    padding: 20px;
    font-size: 13px;
  }
  &:hover,
  &.in  {
    right: 0px;
  }
  &.in,
  &.out  {
    transition: right 0.4s ease-in-out;
    -o-transition: right 0.4s ease-in-out;
    -ms-transition: right 0.4s ease-in-out;
    -moz-transition: right 0.4s ease-in-out;
    -webkit-transition: right 0.4s ease-in-out;
    right: 0px;
  }
  &.out {
    right: -260px;
  }
  #brand-toggle {
    position: absolute;
    right: 260px;
    padding: 10px 20px;
    background: #d1a12a; 
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    cursor: pointer;
  }
  a.btn-slide {
    display: block;
    margin-top: 15px;
    background: #007F38;
    color: #fff;
    padding: 4px 10px;
    font-weight: 700;
  }
}