Paper Collapse

Collapsible paper cards

Fork me on Github

Demo

Simple CSS3 paper cards accordion. Inspired by Google Material Design.

Well, hello there
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Gigantomaniac Monster Text, very long, much width, wow
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Show less
Generic Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Usage

Just include

<link rel="stylesheet" href="../paper-collapse.min.css">

and

<script src="../paper-collapse.min.js"></script>

in your header tag and add the following wherever you want.

<div class="collapse-card">
  <div class="collapse-card__heading">
    <div class="collapse-card__title">
      <i class="fa fa-question-circle fa-2x fa-fw"></i>
      <!-- Title Text -->
    </div>
  </div>
  <div class="collapse-card__body">
    <!-- Body Text -->
  </div>
</div>

This plugin is opt-in and you must initialize it yourself.

<script>
  $(function () {
    $(".collapse-card").paperCollapse();
  });
</script>

Options

Name Type Default Description
animationDuration number 400 Animation duration in milliseconds.
easing string 'swing' Specify the speed at which an animation progresses at different points within the animation.
Note: Use jQuery UI to use more easings than 'swing' or 'linear
closeHandler string '.collapse-card__close_handler' Specify an additional list of close handlers with a comma seperated string with CSS classes or ids.
onShow function nil Function triggers on animation start of show action.
onHide function nil Function triggers on animation start of hide action.
onShowComplete function nil Function triggers on animation complete of show action.
onHideComplete function nil Function triggers on animation complete of hide action.