Event listener responds to first click, but does not execute .addClass() until second click

JDygard 0
Viewed 45

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.

$("#bar").on('click', function(event) {
  console.log("click")
  $("#bar").addClass("bar-open");
});
#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://code.jquery.com/jquery-2.2.4.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>

javascript css html
1 Answers

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>

mscdeveloper0
Related