Toggle button with jquery

<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <button type="text" id="toggleButton">Order</button>
    <div class="order-container col-5">
      <div class="order-bar">
        <div class="order-bar-arrow"></div>
      </div>
      <p>Order something</p>
    </div>
  </body>

</html>

// Code goes here

$(function(){
  
  var toggle= false;
  $("#toggleButton").click(function() {
    if(toggle){
      $(".order-bar-arrow").css({"display":"none"});
      $(".order-container").slideUp(300);
    }else{
      $(".order-container").slideDown(100, function(){
        $(".order-bar-arrow").css({"display":"inline-block"});
      });
    }
    toggle = !toggle;
  });
  
});

/* Styles go here */

body{
  text-align:center;
}

#toggleButton{
  padding:5px;
  border: solid grey 1px;
  margin:10px auto 20px auto;
  cursor:pointer;
  width:100px;
  background:#0073e6;
  color:white;
  border:none;
  border-radius:3px;
  padding:10px;
}

.order-container{
  display:none;
  width:300px;
  margin:0px auto 0 auto;
  text-align:left;
  background:#e6f3ff;
  height:78px;
}

.order-bar{
  display:block;
  border-top:solid 1px blue;
  text-align:center;
  padding:0px 0 0 0;
  height:10px;
}

.order-bar-arrow{
  position:relative;
  top:-10px;
  display:none;
  border-top:solid 1px #0073e6;
  border-left:solid 1px #0073e6;
  width:10px;
  height:10px;
  background: #e6f2ff;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari */
  transform: rotate(45deg); /* Standard syntax */
}

p{
  padding:0 10px;
}