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 – 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>×</button>
</div>
Cool UI! You can change the animation classes to do this - example: http://codepen.io/rafibomb/pen/zoOPRV?editors=1100
You can find all the classes here:
What type of site/app are you building?