<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>

$Mahogany : #620808;
$AppleBlossom : #a53f3f;
$GoldenSand : #f4ce74;
$EggWhite : #ffe9c1;
$OrangeRoughy : #d5441c;
$mainfont : "JF Flat Regular";

@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;
    .item{
        height: 100px;
        h3{
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            padding-left: 50px;
            font-family: $mainfont;
            font-size: 20px;
            font-weight: 400;
        }
        img{
            padding-left: 15px;
            width: 30px;
            vertical-align: middle;
        }
        h3:before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        } 
    }
    .item:first-of-type{
        background: $Mahogany;
        color: $GoldenSand;
    }
    .item:nth-of-type(2){
        background: $AppleBlossom;
        color: $EggWhite;
    }
    .item:nth-of-type(3){
        background: $GoldenSand;
        color: $Mahogany;
    }
    .item:nth-of-type(4){
        background: $EggWhite;
        color: $OrangeRoughy;
    }
    .item:last-of-type{
        background: $OrangeRoughy;
        color: $EggWhite;
    }
    p{
        font-family: $mainfont;
        font-size: 18px;
        font-weight: 400;
        padding: 15px;
        display: none;
        box-shadow: inset 0 3px 7px rgba(#000, 0.2);
    }
    p:first-of-type{
        background: $Mahogany;
        color: $GoldenSand;
    }
    p:nth-of-type(2){
        background: $AppleBlossom;
        color: $EggWhite;
    }
    p:nth-of-type(3){
        background: $GoldenSand;
        color: $Mahogany;
        
    }
    p:nth-of-type(4){
        background: $EggWhite;
        color: $OrangeRoughy;
    }
    p:last-of-type{
        background: $OrangeRoughy;
        color: $EggWhite;
    }
}

(function ($) {
    'use strict';
    $('.item').on("click", function () {
        $(this).next().slideToggle(100);
        $('p').not($(this).next()).slideUp('fast');
    });
}(jQuery));