Class doesnt toggle outside of the button

Question

I have a button and when I click to it I want to show another div. So basically when the user click DETAILS button. it should, the class 'show' should be added to order-body and it should show the div.

    <div id="1-order__content" class="order__content">
                          <div class="header">
                            <div class="row">
                              <div class="col-lg-3 col-md-12 col-sm-12">
                                <button id="waiting-button" type="submit" class="button-status">
                                  DETAILS
                                </button>
                              </div>
                            </div>
                          </div>
<div class="order-body show"> </div>

Basic css for this:

.orders .order-body {
  font-size: 14px;
  display: none;
}

.orders .order-body.show {
  display: block;
}

And javascript:

$(document).ready(function(){
  $("waiting-button").click(function(){
      $(this).toggleClass("show");
  });
});

I dont know why but it doesnt work as I expected. It does nothing actually. So what do you think I am making wrong?

Thanks

Answer 1

You should be using different selector for the element.

$(document).ready(function(){
  $("#waiting-button").click(function(){
      $(this).toggleClass("show");
  });
});

The "#" symbol before waiting-button meants that you are using element ID to select.