DEV Community

loading...
Cover image for accordion jquery examples with source code

accordion jquery examples with source code

stackfindover profile image Stackfindover ・3 min read

Hello guys in this tutorial we will create Accordion using HTML CSS and jQuery

What does accordion mean?
An accordion is used to show (and hide) HTML content. Use the w3-hide class to hide the accordion content.

First, we need to create two files index.html and style.css then we need to do code for it.

Accordion Step:1

Add below code inside index.html

<!DOCTYPE html>
<html>
<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">Simple Accordion jQuery</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>

  <script type="text/javascript">
    $(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();
      });
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Accordion Step:2

Then we need to add code for style.css which code I provide in the below screen.

@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;
    overflow: hidden;
}
h1 {
  color: #fff;
}
.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;
}
Enter fullscreen mode Exit fullscreen mode

More Examples

Accordion Video Output:

Accordion CodePen Output:

We will update soon :)

Discussion (1)

pic
Editor guide
Collapse
rahul7733 profile image
Rahul7733

Cool