<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Material Design Accordion</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="title"><h1>Material design accordion</h1><h6>Inspirated in MaterializeCSS.</h6></div>
<div class="container">
<ul class="collapsible popout" data-collapsible="accordion">
<li class="">
<div class="collapsible-header"><i class="material-icons">dashboard</i>First</div>
<div class="collapsible-body" style=""><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li class="">
<div class="collapsible-header"><i class="material-icons">star</i>Second</div>
<div class="collapsible-body" style=""><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li class="">
<div class="collapsible-header"><i class="material-icons">play_arrow</i>Third</div>
<div class="collapsible-body" style=""><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li class="">
<div class="collapsible-header"><i class="material-icons">location_on</i>Sample</div>
<div class="collapsible-body" style=""><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li class="">
<div class="collapsible-header"><i class="material-icons">phone</i>Material</div>
<div class="collapsible-body" style=""><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li class="">
<div class="collapsible-header"><i class="material-icons">mail</i>Style</div>
<div class="collapsible-body" style=""><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
html, body {
padding: 0;
margin: 0;
}
html {
line-height: 1.5;
font-size: 14px;
}
body {
font-family: 'Open Sans', sans-serif;
color: rgba(0, 0, 0, 0.8);
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
}
.title {
text-align: center;
font-size: 1.5rem;
padding: 0px 30px;
font-family: "Quicksand";
}
.title h1 {
text-transform: uppercase;
font-size: 4rem;
text-shadow: 1px 2px 2px #0b2740;
color: #1E4A6F;
}
.container {
padding: 50px;
}
.collapsible {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
margin: 0.5rem 0 1rem 0;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.collapsible.popout {
border: none;
box-shadow: none;
}
.collapsible.popout > li {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transform: scaleX(0.9) translate3d(0, 0, 0);
transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.collapsible.popout > li:hover {
will-change: margin, transform;
}
.collapsible.popout > li.active {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
margin: 16px 0;
transform: scaleX(1) translate3d(0, 0, 0);
}
.collapsible-header {
display: block;
cursor: pointer;
height: 3rem;
line-height: 3rem;
padding: 0 1rem;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.collapsible-header i {
width: 2rem;
font-size: 1.6rem;
line-height: 3rem;
display: block;
float: left;
text-align: center;
margin-right: 1rem;
}
.collapsible-body {
overflow: hidden;
display: none;
border-bottom: 1px solid #ddd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.collapsible-body p {
margin: 0;
padding: 2rem;
}
$(".collapsible li").click(function(){
$(this).siblings().removeClass("active"); //comment this line to make the accordion expansible
$(this).toggleClass("active");
if($(this).hasClass("active")){
$(this).siblings().find('.collapsible-body').slideUp(300);
$(this).find('.collapsible-body').slideDown(300);
}else{
$(this).find('.collapsible-body').slideUp(300);
}
//$(this).find('.collapsible-body').slideToggle(500); //change display property
});