A “pure” Angular implementation of jQuery-style toggleSlide().
See http://jsfiddle.net/3sVz8/19/ for an example.
USAGE:
Link to the library in your index (or require.js), and add 'angularSlideables' to your app modules.
No CSS is necessary. Add the “slideable” class to any hidden, slideable content. Add a slide-toggle attribute to any trigger.
This directive currently only works on single targetted IDs. I’ll expand it to cover classes if there’s demand.
EXAMPLES:
<article ng-app="angularSlideables">
<h1 slide-toggle="#derp" >Click here for Hipster Ipsum.</h1>
<div id="derp" class="slideable">
<p>Bespoke aesthetic Bushwick craft beer. Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
<p>Ethical adipisicing before they sold out, sriracha Thundercats cardigan dolor deep v placeat. Flannel tattooed meggings direct trade banh mi tousled sriracha. Portland VHS ut dreamcatcher. Butcher eu irony, Banksy leggings eiusmod Pinterest hashtag Etsy asymmetrical lo-fi Helvetica quis incididunt adipisicing. YOLO cliche minim mlkshk dreamcatcher excepteur, Austin McSweeney's.</p>
<p>Coded @ Kinfolk Studios in Williamsburg, Brooklyn, 2013.</p>
</div>
<p>Your fresh artisinal Ipsum will appear above this paragraph. </p>
</article>
The ID can be dynamically generated…
<ul>
<li ng-repeat="row in data">
<span slide-toggle="#row_{{$index}}" >expand row #{{$index}}.</span>
<div id="row_{{$index}}" class="slideable">
<p>How are YOU doing?</p>
</div>
</li>
</ul>
OPTIONAL ATTRIBUTES:
<div id="derp" class="slideable" easing="linear" duration="5s">…</div>