Google Inbox Style Content Toggle Plugin For jQuery - Minimalist Collapse

Minimalist Collapse is an extremely lightweight jQuery plugin which can be used to expand and collapse block-level elements with smooth CSS3 transitions as you seen on Google Inbox.

How to use it:

1. Load the jQuery Minimalist Collapse plugin after JQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.minimalist.collapse.js"></script>

2. Create a basic FAQ system using the jQuery Minimalist Coppapse plugin.

<div class="minimalist-collapse">
  <dl class="m-result">
    <dt data-collapse="m-collapse" data-target="#faq-1">
      FAQ 1
    </dt>
    <dd class="m-collapse" id="faq-1">
      Answer 1
    </dd>
  </dl>
  <dl class="m-result">
    <dt data-collapse="m-collapse" data-target="#faq-2">
      FAQ 2
    </dt>
    <dd class="m-collapse" id="faq-2">
      Answer 2
    </dd>
  </dl>
  <dl class="m-result">
    <dt data-collapse="m-collapse" data-target="#faq-3">
      FAQ 3
    </dt>
    <dd class="m-collapse" id="faq-3">
      Answer 3
    </dd>
  </dl>
  <dl class="m-result">
    <dt data-collapse="m-collapse" data-target="#faq-4">
      FAQ 4
    </dt>
    <dd class="m-collapse" id="faq-4">
      Answer 4
    </dd>
  </dl>
</div>

3. Call the plugin to initialize the FAQ system.

$('.minimalist-collapse').mcollapse();

4. Style the plugin whatever you like.

.m-actived,
.m-result.shadow-effect:hover,
.active.shadow-effect {
  box-shadow: 0 0 15px #d9d9d9;
  z-index: 2;
}

.m-result {
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  display: block;
  margin-bottom: 1px;
  position: relative;
  z-index: 1;
  -webkit-transition: all 130ms ease-in-out;
  -moz-transition: all 130ms ease-in-out;
  -ms-transition: all 130ms ease-in-out;
  -o-transition: all 130ms ease-in-out;
  transition: all 130ms ease-in-out;
}

.active.content-focus { margin: 12px 0; }
 [data-collapse=m-collapse] {
 cursor: pointer;
 padding: 10px;
}

.m-collapse {
  display: none;
  padding: 10px;
  font-size: .9em;
}

5. Default plugin options.

$('.minimalist-collapse').mcollapse({
  shadowEffect: true,
  contentFocus: true,
  delay: 'walker' // faster, medium or walker
});

---

This awesome jQuery plugin is developed by cosmefae. For more Advanced Usages, please check the demo page or visit the official website.