Hi,

I have a lovely panel for advanced search options that I want to have slide in when a user clicks the "Advanced Search" link. It works just fine except that the animation start position seems to be at the top of the div containing the link. I would prefer the animation to start at the bottom of the div containing the link.

Is it possible to achieve this? 

Here is the HTML:

    <div class="row">

      <div class="small-12 medium-2 columns">
        <a href="new-oss-request.html" class="button primary raised">New Request</a>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="input-group">
          <input class="input-group-field" type="text" placeholder="Requester: Jane Doe">
          <div class="input-group-button">
            <input type="submit" class="button" value="Search">
          </div>
        </div>
      </div>

      <div class="small-12 medium-2 columns">
        <p class="inline-block"><a data-toggle="advanced-search">Advanced Search <span class="ui-icon-tiny ui-icon-caret-d primary"></span></a></p>      
      </div>

      <div class="small-12 medium-3 columns">
        <p class="text-right">1 &ndash; 10 of 137</p>
      </div>

      <div class="small-12 medium-1 columns">
        <select name="" id="">
          <option value="">10</option>
          <option value="">25</option>
          <option value="">50</option>
          <option value="">All</option>
        </select>
      </div>

    </div><!--end row-->

    <div class="callout no-show" id="advanced-search" data-toggler data-animate="slide-in-down slide-out-up" data-closable>
      <h2>Advanced Search</h2>
      <button class="close-button" data-close>&times;</button>
    </div>