SOURCE

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

<section class="accordion">
  <div class="item">
    <img src="http://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="http://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="http://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="http://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="http://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('http://f9ir.github.io/acc/acc/font/JF-Flat-regular.eot');
  src: url('http://f9ir.github.io/acc/acc/font/JF-Flat-regular.eot?#iefix') format('embedded-opentype'), url('http://f9ir.github.io/acc/acc/font/JF-Flat-regular.svg#JF Flat Regular') format('svg'), url('http://f9ir.github.io/acc/acc/font/JF-Flat-regular.woff') format('woff'), url('http://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;
  }
}