事件监听器响应第一次点击，但直到第二次点击才执行.addClass()

Question

http://jsfiddle.net/gsqd4k5h/1/

When I click on the event listener (#bar) the console.log fires but the.addClass() doesn't. I looked through some threads on the topic but found nothing that helped.

HTML

<div id="bar">
  <div>
    <div>
      <span> This a reveal button </span>
    </div>
  </div>
  <div class="hidden-section">
    <div>
      This is a bunch of hidden content
    </div>
  </div>
</div>

CSS

#bar {
    overflow-y: clip;
    height: 48px;
    transition: height 1s;
    position: absolute;
    z-index: 1005;
    background-color: rgb(248, 249, 250);
    border: 1px solid rgb(222, 226, 230);
    border-radius: 5px;
}

.bar-open {
    height: 365px !important;
}

.hidden-section {
  padding-top: 100px;
}

JS

$("#bar").on('click', function(event) {
  console.log("click")
  $("#bar").addClass("bar-open");
});

Answer 1

Maybe like this:

 $("#bar").on('click', function(event) { console.log("click") $(this).addClass("bar-open"); console.log($(this).attr('class')); });

 #bar { overflow-y: clip; height: 48px; transition: height 1s; position: absolute; z-index: 1005; background-color: rgb(248, 249, 250); border: 1px solid rgb(222, 226, 230); border-radius: 5px; }.bar-open { height: 365px;important. }:hidden-section { padding-top; 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bar"> <div> <div> <span> This a reveal button </span> </div> </div> <div class="hidden-section"> <div> This is a bunch of hidden content </div> </div> </div>