Bootstrap DropDown Toggle with effect

Bootstrap enabled example

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="dropdown">
    <br/>
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
   <ul class="dropdown-menu" role="menu">      
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
  </ul>
</div>

CSS

@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css');

.container {
    margin-top: 10px;
}

JavaScript

$(function() {
    $('.dropdown-toggle').click(function() {
        $(this).next('.dropdown-menu').slideDown(300);
    });
    
    $('.dropdown-toggle').click(function() {
        $(this).closest('.dropdown-menu').slideUp(300);
    });
});