<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Accordions</h3>
<hr>
<div class="accordion panel-group">
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="accordion-link active" aria-expanded="true">
<h4 class="panel-title">Bootstrap CSS</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse" aria-expanded="true">
<div class="panel-body">
<p>
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
</p>
<p>
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="accordion-link">
<h4 class="panel-title">Velocity.js</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse collapsed">
<div class="panel-body">
<p>
Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS
transitions combined.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="accordion-link">
<h4 class="panel-title">Material design</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse collapsed">
<div class="panel-body">
<p>
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
</p>
<p>
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in
the physical world, without breaking the rules of physics.
</p>
<p>
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="accordion-link">
<h4 class="panel-title">Minimal</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse collapsed">
<div class="panel-body">
<p>
In the visual arts and music, minimalism is a style that uses pared-down design elements.
</p>
<p>
Minimalism in the arts began in post–World War II Western Art, most strongly with American visual arts in the 1960s and early 1970s. Prominent artists associated with minimalism include Donald Judd, John McCracken, Agnes Martin, Dan Flavin, Robert Morris,
Anne Truitt, and Frank Stella. It derives from the reductive aspects of Modernism and is often interpreted as a reaction against Abstract expressionism and a bridge to Postminimal art practices.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3>Toggles</h3>
<hr>
<div class="toggle panel-group">
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="toggle-link active" aria-expanded="true">
<h4 class="panel-title">Bootstrap CSS</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse" aria-expanded="true">
<div class="panel-body">
<p>
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
</p>
<p>
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="toggle-link" aria-expanded="false">
<h4 class="panel-title">Velocity.js</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse collapsed" aria-expanded="false">
<div class="panel-body">
<p>
Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS
transitions combined.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="toggle-link" aria-expanded="false">
<h4 class="panel-title">Material design</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse collapsed" aria-expanded="false">
<div class="panel-body">
<p>
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
</p>
<p>
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in
the physical world, without breaking the rules of physics.
</p>
<p>
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading waves-effect">
<a href="#" class="toggle-link" aria-expanded="false">
<h4 class="panel-title">Minimal</h4>
<i class="material-icons accordion-toggle-icon">arrow_downward</i>
</a>
</div>
<div class="content-collapse collapsed" aria-expanded="false">
<div class="panel-body">
<p>
In the visual arts and music, minimalism is a style that uses pared-down design elements.
</p>
<p>
Minimalism in the arts began in post–World War II Western Art, most strongly with American visual arts in the 1960s and early 1970s. Prominent artists associated with minimalism include Donald Judd, John McCracken, Agnes Martin, Dan Flavin, Robert Morris,
Anne Truitt, and Frank Stella. It derives from the reductive aspects of Modernism and is often interpreted as a reaction against Abstract expressionism and a bridge to Postminimal art practices.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
font-family: Roboto;
margin-top: 50px;
background: #fafafa;
overflow-y: scroll;
}
h3 {
text-transform: uppercase;
font-weight: 700;
font-size: 18px;
text-align: center;
}
hr {
margin-bottom: 30px;
}
p {
line-height: 24px;
}
p:last-child {
margin-bottom: 0;
}
a:hover,
a:focus {
text-decoration: none;
}
.panel {
opacity: 0.2;
transform: scale(0.5);
}
.panel-body {
padding: 30px;
}
.accordion {
margin-bottom: 60px;
}
.accordion .collapsed,
.toggle .collapsed {
display: none;
}
.panel-group .panel {
border: none;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.panel-group .panel + .panel {
margin-top: 10px;
}
.panel-group .panel-heading {
position: relative;
padding: 0;
border-radius: 0;
display: block;
}
.panel-group .panel-heading > a {
background: #eee;
display: block;
padding: 18px 15px;
}
.panel-group .panel-title {
color: #333;
font-size: 13px;
}
.panel-group a[aria-expanded='true'] {
background: #3f51b5;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-group a[aria-expanded='true'] .panel-title {
color: #fff;
}
.panel-group .accordion-toggle-icon {
font-size: 16px;
line-height: 50px;
position: absolute;
top: 0;
right: 12px;
transition: transform 0.4s ease-out;
color: #333;
}
.panel-group [aria-expanded='true'] .accordion-toggle-icon {
color: #fff;
transform: rotate(180deg) translateZ(0);
}
// Opening animation
$.Velocity.RegisterEffect('fadeInPanels', {
defaultDuration: 500,
calls: [
[{
opacity: [1, 0.3],
scale: [1, 0.5]
}]
]
});
$('.panel').velocity('fadeInPanels', {
stagger: 250,
})
// Accordions
$('.accordion-link').click(function(e) {
e.preventDefault();
var accordionWrapper = $(this).closest('.accordion'),
accordionActivePanel = $(this).closest('.panel'),
accordionActiveLink = accordionWrapper.find('.active');
if ($(this).closest('.panel').find('.content-collapse').hasClass('velocity-animating')) {
return false;
} else if (e.handled !== true) {
accordionActiveLink.closest('.panel').find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
});
if ($(this).hasClass('active')) {
$(this).attr('aria-expanded', false).removeClass('active');
} else {
accordionActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
});
accordionWrapper.find('.accordion-link').removeClass('active').attr('aria-expanded', false);
$(this).attr('aria-expanded', true).addClass('active');
}
e.handled = true;
} else {
return false;
}
});
// Toggles
$('.toggle-link').click(function(e) {
e.preventDefault();
var toggleActivePanel = $(this).closest('.panel');
if (toggleActivePanel.find('.content-collapse').hasClass('velocity-animating')) {
return false;
} else if (e.handled !== true) {
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
});
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
});
$(this).attr('aria-expanded', true).addClass('active');
}
e.handled = true;
} else {
return false;
}
});