https://github.com/sponk-eu/angular-slideables

A "pure" Angular implementation of jQuery-style toggleSlide() - cloned from https://github.com/EricWVGG/AngularSlideables
https://github.com/sponk-eu/angular-slideables

Last synced: about 2 months ago
JSON representation

A "pure" Angular implementation of jQuery-style toggleSlide() - cloned from https://github.com/EricWVGG/AngularSlideables

• Host: GitHub
• URL: https://github.com/sponk-eu/angular-slideables
• Owner: sponk-eu
• License: mit
• Created: 2017-03-08T12:32:13.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-08T12:50:27.000Z (about 8 years ago)
• Last Synced: 2025-03-11T21:02:43.638Z (about 2 months ago)
• Homepage:
• Size: 3.91 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
AngularSlideables

=================

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.

=== 

Bower:

`bower install angular-slideables --save`

NPM

`npm install angular-slideables`

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>