Have you noticed recently that designers started implementing Google Material Design concept in mobile apps and websites?
There are so many apps now that are based on the simple concepts of Material Design probably due to the fact that material and motion provide context in design. Material Design is designed for the users so they have better awareness and comprehension of the interface.
A great example of using the principles of Material Design is the simple plugin I am presenting today. Paper Collapse is created by Alexander Rühle who was inspired to create a paper card accordion which is actually quite easy to implement.
Let’s have a look how you can use it on your website and make sure that you check out the demo to see how great these paper cards are.
Step #1
First of all, you need to include the required CSS file between the head tags of your document.
<link rel="stylesheet" href="css/paper-collapse.min.css">
Step #2
The next step is to add the necessary structure for the paper cards together with your content. Have a look at the example below.
<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> <!-- Put your title here --> </div> </div> <div class="collapse-card__body"> <!-- Add your text here --> </div> </div>
Step #3
You also need to include the latest jQuery library to make sure everything runs smoothly:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Next, add the necessary JS file:
<script src="js/paper-collapse.min.js"></script>
Step #4
Paper Collapse is an opt-in plugin so you need to initialize it yourself. Include the following code snippet at the end of your document before the closing tag.
<script>
$(function () {
$('.collapse-card').paperCollapse()
})
</script>