title: How to make Bootstrap drop down menu slide down on button click
body: <p>im using Bootstrap and I'm trying to declare an event on the drop down menu when a button is clicked. For some odd reason the jquery event isnt triggering. The drop down menu should drop down right under the search query element. 
  My JS Fiddle is <a href="http://jsfiddle.net/sean3200/fNrZ3/" rel="nofollow">http://jsfiddle.net/sean3200/fNrZ3/</a> ...Any help would be appreciated.. Thankszz!! Below is some of the code</p>
  
  <pre><code>     &lt;div class="container"&gt;
    &lt;div class="navbar"&gt;
      &lt;div class="navbar-inner"&gt;
        &lt;div class="container"&gt;
          &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/a&gt;
          &lt;a class="brand" href="#"&gt;Forbes Clientel&lt;/a&gt;
          &lt;div class="nav-collapse collapse"&gt;
            &lt;ul class="nav"&gt;
              &lt;li&gt;
                &lt;a href="#" class="active"&gt;Home&lt;/a&gt; 
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#"&gt;Contact&lt;/a&gt; 
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;form class="navbar-search"&gt;
            &lt;input class="search-query" placeholder="Search..." type="text"&gt;
            &lt;div id="drop" class="dropdown"&gt;
              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
                &lt;li&gt;
                  &lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt; 
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt; 
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt; 
                &lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li&gt;
                  &lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt; 
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="hero-unit"&gt;
        &lt;h1&gt;Forbes Clientel&lt;/h1&gt;
        &lt;p&gt;FC is a directory of the top forbes earning entrepreneurs&lt;/p&gt;
        &lt;input id="myBtn"
        class="btn btn-primary btn-large" value="Search" type="button"&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  //script
               $(document).ready(function(){
                  $("#myBtn").click(function(){
                    $("#drop").slidedown();
                  })
  
               })
  </code></pre>