Google Inbox Style Content Toggle Plugin For jQuery - Minimalist Collapse
File Size: | 8.14 KB |
---|---|
Views Total: | 3217 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.