<h1>Minimal Accordion</h1>

<ul class="accordion">
  <li>
    <h5 class="accordion-trigger">Item #1</h5>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit assumenda autem, odio! Dolor, non animi eaque numquam consequuntur quae iure doloremque, odit laudantium quo esse totam quos ab, expedita rem</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est natus ducimus, illo dolore possimus cumque. Magnam minus, cumque eligendi, ratione natus repellat architecto beatae illo, dolores delectus totam eaque.</p>
    </div>
  </li>
  <li>
    <h5 class="accordion-trigger">Item #2</h5>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quod iste repellendus laudantium at rem ullam laboriosam veniam ut, et, aliquid fuga officiis porro omnis vero dolorum quis neque nam!</p>
    </div>
  </li>
  <li>
    <h5 class="accordion-trigger">Item #3</h5>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel rem voluptatibus, ullam aperiam! Pariatur doloremque, ipsum! Blanditiis voluptatibus, harum nobis rerum delectus ut eos necessitatibus, provident id dolor amet molestias!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores deleniti repellat dolorum amet. Quasi ullam reiciendis necessitatibus dignissimos veritatis blanditiis non ducimus, doloribus, nam eligendi suscipit quaerat architecto fugiat, excepturi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae maxime esse accusantium rem maiores nisi optio ipsam, cumque minus nulla!</p>
    </div>
  </li>
  <li>
    <h5 class="accordion-trigger">Item #4</h5>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde placeat obcaecati aliquid, iusto totam vel provident quisquam itaque possimus modi soluta qui accusamus nostrum cumque illum. Laborum commodi esse natus.</p>
    </div>
  </li>
</ul>

body {
  padding: 15px;
}

h1 {
  text-align: center;
}

.accordion li {
  list-style: none;
  margin: 0;
}

.accordion-trigger {
  margin: 1px 0 0;
  padding: 2px 15px;
  background: #DDD;
  transition: .2s ease-in;
}

.accordion-trigger:hover {
  cursor: pointer;
  background: #DADADA;
}

.accordion-content {
  background: #ECECEC;
  padding: 5px 15px;
  margin: 0;
}

$(function() {
  $('.accordion-content').hide();

  $('.accordion').on('click', '.accordion-trigger', function(e) {
    e.preventDefault();

    $('.accordion-content:visible').slideUp(300);

    $(this)
      .next('.accordion-content')
      .not(':animated')
      .slideToggle(300);
  });
});