How do I change the direction of slideToggle to up using jQuery?

Question

<div class="row">
  <div class="col-lg-2" ></div>
  <div class="head" style="background-color: #1c94c4; text-align: center; cursor: pointer;"> Chat</div>
  <div class="chat" style="display: none;width:auto;height: 200px;background:whitesmoke;">
    <div class="body" style="overflow:auto; overflow-x: hidden;height: 90%; width:auto;"></div>
    <textarea class="form-control" placeholder="Type a message..." style="float:left; resize: none; width:84%; height:34px; margin-right:4" ></textarea>
    <button class="btn btn-default" style="padding: 7px;height:34px ">Send</button>
  </div>
</div>

<script>
  $(document).ready(function () {
    $('.head').click(function () {
      $('.chat').slideToggle({
        direction: "up"
      }, 300);
    })
  })
</script>

Answer 1

You just need to hide it initially. From the documentation :

If the element is initially displayed, it will be hidden; if hidden, it will be shown.

You can hide it with a single CSS property ( display: none ), which you can put in a class or add directly, or with .hide() .

Also, direction is not a documented option, and your sample code actually works correctly in this jsFiddle (because you do have display:none ). You might want to make sure you're using a current version of jQuery and don't have any console errors.

Answer 2

If you refer to the jQuery .slideToggle() documentation you'll see direction is not an available option. However, by moving your .head element below the toggling element we can achieve what I believe you are after.

 $(document).ready(function () { $('.head').click(function () { $('.chat').slideToggle(300); }) }) 

 .chat { display: none; width: auto; background: whitesmoke; } .form-control { float: left; resize: none; width: 84%; height: 200px; margin-right: 4px; } .btn { padding: 7px; height: 34px; } .head { clear: left; background-color: #1c94c4; text-align: center; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chat"> <textarea class="form-control" placeholder="Type a message..."></textarea> <button class="btn btn-default">Send</button> </div> <div class="head"> Chat</div>