Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Angular collapsible block / ng-transclude demo

Angular collapsible block

Quick Demo

A directive that uses ng-transclude to create collapsible blocks. Read more about it here.

Usage

  1. Include ng-collapsible-block.js.
  2. Include ng-collapsible-block.css.
  3. Add dm.collapsibleBlock as a dependency to your app.
  4. Profit!

... 5. (optional) Include ngAnimate as a dependency to animate the collapsible block toggling.

Bower

Installable via bower:

bower install ng-collapsible-block

Example

See index.html for an example.

[...]
<collapsible collapsible-title="Title">
  <section>
    Collapsible content
  </section>
</collapsible>
[...]

Title icons

You can pass 'title' icons to the directive via the collapsed-icon & expanded-icon attributes. In the example index.html font-awesome is used.

<collapsible collapsible-title="Title" collapsed-icon="fa fa-chevron-down" expanded-icon="fa fa-chevron-up">
  <section>
    Collapsible content
  </section>
</collapsible>

Further customization

The class clps--expanded will be appended to the directive container when it's expanded. To override the directive styles you can customize the following:

  • .clps -> the directive container
  • .clps--expanded -> the directive container when expanded
  • .clps__title -> the directive title
  • .clps__content -> the directive content

Check out index.css for the full list of CSS props.

About ngmilk

ngmilk is the place to go for fresh front-end articles, with a focus on AngularJS. See more on ngmilk.rocks

Follow @ngmilkrocks on Twitter to stay ahead of the game.

About

A directive that uses ng-transclude to create collapsible blocks, see a quick demo: http://ng-milk.github.io/angular-collapsible-block-directive/

Topics

Resources

License

Packages

No packages published