<head>
  <meta charset="utf-8">
  <title>Simple Accordion jQuery</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="acc__outer">
    <h1 align="center"><a href="https://blogs.stackfindover.com">Simple Accordion jQuery</a></h1>
    <div class="acc">
        <div class="acc__card">
          <div class="acc__title">What is Lorem Ipsum?</div>
          <div class="acc__panel">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </div>
        </div>
        <div class="acc__card">
          <div class="acc__title">What is Lorem Ipsum?</div>
          <div class="acc__panel">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </div>
        </div>
        <div class="acc__card">
          <div class="acc__title">What is Lorem Ipsum?</div>
          <div class="acc__panel">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </div>
        </div>
        <div class="acc__card">
          <div class="acc__title">What is Lorem Ipsum?</div>
          <div class="acc__panel">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </div>
        </div>
        <div class="acc__card">
          <div class="acc__title">What is Lorem Ipsum?</div>
          <div class="acc__panel">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </div>
        </div>
    </div>
  </div>
</body>
@import url("https://fonts.googleapis.com/css?family=Lato:300,400|PT+Sans:400,700");
body {
    padding: 0;
    margin: 0;
    color: #545454;
    font: 500 16px 'Lato', sans-serif;
    background: #4b00ff;
}
h1,h1 > a {
  color: #fff;
  text-decoration:0;
}
.acc {
  margin: 0 auto;
  max-width: 700px;
}

.acc__card {
  margin: 20px 0; 
  position: relative;
}

.acc__title {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: #212121;
  cursor: pointer;
  display: block;
  padding: 1em 1.5em;
  position: relative;
  text-align: left;
}
.acc__title::after {
  content: " ";
  width: 8px;
  height: 8px;
  border-right: 1px solid #4a6e78;
  border-bottom: 1px solid #4a6e78;
  position: absolute;
  right: 20px;
  top: 20px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.acc__title.active::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.acc__panel {
  background: #f1f2f3;
  color: #212121;
  display: none;
  margin: 0;
  padding: 2em;
  text-align: left;
}
$(function () {
      $(".acc__title").click(function (j) {
        var dropDown = $(this).closest(".acc__card").find(".acc__panel");
        $(this).closest(".acc").find(".acc__panel").not(dropDown).slideUp();

        if ($(this).hasClass("active")) {
          $(this).removeClass("active");
        } else {
          $(this).closest(".acc").find(".acc__title.active").removeClass("active");
          $(this).addClass("active");
        }

        dropDown.stop(false, true).slideToggle();
        j.preventDefault();
      });
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.