<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - flat accordion</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section class="accordion">
<div class="item">
<img src="https://f9ir.github.io/acc/acc/img/Location-Pin.png" alt="">
<h3>Location</h3>
</div>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
<div class="item">
<img src="https://f9ir.github.io/acc/acc/img/Headphones.png" alt="">
<h3>Music</h3>
</div>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
<div class="item">
<img src="https://f9ir.github.io/acc/acc/img/Lightbulb.png" alt="">
<h3>Notes</h3>
</div>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
<div class="item">
<img src="https://f9ir.github.io/acc/acc/img/Bookmarks.png" alt="">
<h3>Books</h3>
</div>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
<div class="item">
<img src="https://f9ir.github.io/acc/acc/img/Lightning-Bolt.png" alt="">
<h3>Tendances</h3>
</div>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
@font-face {
font-family: "JF Flat Regular";
src: url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.eot");
src: url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.eot?#iefix") format("embedded-opentype"), url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.svg#JF Flat Regular") format("svg"), url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.woff") format("woff"), url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
background: #f6704b;
}
* {
margin: 0;
padding: 0;
}
.accordion {
margin: 50px auto;
width: 380px;
background: #ccc;
cursor: pointer;
}
.accordion .item {
height: 100px;
}
.accordion .item h3 {
display: inline-block;
vertical-align: middle;
height: 100%;
padding-left: 50px;
font-family: "JF Flat Regular";
font-size: 20px;
font-weight: 400;
}
.accordion .item img {
padding-left: 15px;
width: 30px;
vertical-align: middle;
}
.accordion .item h3:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.accordion .item:first-of-type {
background: #620808;
color: #f4ce74;
}
.accordion .item:nth-of-type(2) {
background: #a53f3f;
color: #ffe9c1;
}
.accordion .item:nth-of-type(3) {
background: #f4ce74;
color: #620808;
}
.accordion .item:nth-of-type(4) {
background: #ffe9c1;
color: #d5441c;
}
.accordion .item:last-of-type {
background: #d5441c;
color: #ffe9c1;
}
.accordion p {
font-family: "JF Flat Regular";
font-size: 18px;
font-weight: 400;
padding: 15px;
display: none;
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);
}
.accordion p:first-of-type {
background: #620808;
color: #f4ce74;
}
.accordion p:nth-of-type(2) {
background: #a53f3f;
color: #ffe9c1;
}
.accordion p:nth-of-type(3) {
background: #f4ce74;
color: #620808;
}
.accordion p:nth-of-type(4) {
background: #ffe9c1;
color: #d5441c;
}
.accordion p:last-of-type {
background: #d5441c;
color: #ffe9c1;
}
(function ($) {
'use strict';
$('.item').on("click", function () {
$(this).next().slideToggle(100);
$('p').not($(this).next()).slideUp('fast');
});
}(jQuery));