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 or attribute 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>