Accordeon Jquery (source: https://jsfiddle.net/jaffbetoweb/w5tzurha/2/#)

fiddle.css

* {
  box-sizing:border-box;
}
.container {
  position: relative;
  display:block;
  margin:0px auto;
  width: 100%;
  max-width:1170px;
  font-family:Arial;
  padding:40px;
}
.accord {
  display:inline-block;
  width:100%;
  float:left;
  margin:0px;
  padding:0px;
}
.accord-item {
  display:inline-block;
  width:100%;
  float:left;
  margin:-1px 0px 0px 0px;
  padding:0px;
  border: 1px solid #ccc;
}
.accord-header {
  display:inline-block;
  width:100%;
  float:left;
  margin:0px 0px 0px 0px;
  padding:20px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  background-color:#444;
  color:#fff;
  transition: all .2s;
}
.accord-header.open {
  background-color:#fff;
  color:#444;
  transition: all .2s;
}
.accord-num {
  position:relative;
  top:0;
  float:left;
  font-size:32px;
  line-height:0.5;
  padding-right:10px;
}
.accord-title {
  
}
.accord-icon {
  position:relative;
  top:0;
  float:right;
  font-size:32px;
  line-height:0.5;
  padding-right:10px;
  color:#ccc;
  transition: all .2s;
}
.accord-icon:after{
  content:"\002B";
  transition: all .2s;
}
.open .accord-icon:after{
  content:"\2212";
  transition: all .2s;
}
.accord-body {
  display:none;
  width:100%;
  float:left;
  margin:0px;
  padding:20px;
  background-color: #fff;
}

fiddle.html

<div class="container">

  <ul class="accord">
    <li class="accord-item">
      <div class="accord-header">
        <span class="accord-num">1 </span>
        <span class="accord-title"> Lorem Title </span>
        <span class="accord-icon"></span>
      </div>
      <div class="accord-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque neque laboriosam, deserunt. Ullam enim officiis necessitatibus quam nisi, doloribus cupiditate accusantium temporibus optio, dolores officia nobis vero hic distinctio expedita?</p>
      </div>
    </li>
    <li class="accord-item">
      <div class="accord-header">
        <span class="accord-num">1 </span>
        <span class="accord-title"> Lorem Title </span>
        <span class="accord-icon"></span>
      </div>
      <div class="accord-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque neque laboriosam, deserunt. Ullam enim officiis necessitatibus quam nisi, doloribus cupiditate accusantium temporibus optio, dolores officia nobis vero hic distinctio expedita?</p>
      </div>
    </li>
    <li class="accord-item">
      <div class="accord-header">
        <span class="accord-num">1 </span>
        <span class="accord-title"> Lorem Title </span>
        <span class="accord-icon"></span>
      </div>
      <div class="accord-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque neque laboriosam, deserunt. Ullam enim officiis necessitatibus quam nisi, doloribus cupiditate accusantium temporibus optio, dolores officia nobis vero hic distinctio expedita?</p>
      </div>
    </li>
    <li class="accord-item">
      <div class="accord-header">
        <span class="accord-num">1 </span>
        <span class="accord-title"> Lorem Title </span>
        <span class="accord-icon"></span>
      </div>
      <div class="accord-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque neque laboriosam, deserunt. Ullam enim officiis necessitatibus quam nisi, doloribus cupiditate accusantium temporibus optio, dolores officia nobis vero hic distinctio expedita?</p>
      </div>
    </li>
  </ul>
  
</div>

fiddle.js

$(document).ready(function() {
    $('.accord-header').click(function(e) {
    	$(this).parent('.accord-item').siblings('.accord-item').children('.accord-body').stop().slideUp('fast');
      $(this).siblings('.accord-body').stop().slideToggle('fast');
      $(this).parent('.accord-item').siblings('.accord-item').children('.accord-header').removeClass('open');
      $(this).toggleClass('open');
    });
});