Accordion jQuery examples with source code
Tags: tutorial, html, css, javascript
Published: 2021-02-05 05:39:09

***Hello guys in this <a href="https://blog.stackfindover.com/category/jquery/">tutorial</a> we will create <a href="https://jqueryui.com/accordion/">Accordion</a> using HTML CSS and <a href="https://jquery.com/">jQuery</a>***

**<a href="https://www.w3schools.com/w3css/w3css_accordions.asp">What does accordion mean?</a>**
***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**
```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>
```
###Accordion Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.
```css
@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;
}
```
###***<a href="https://blog.stackfindover.com" rel="dofollow">More Examples</a>***###


###Accordion Video Output:###
{% youtube nUMIgr0wyaA %}

###Accordion CodePen Output:###
{% codepen https://codepen.io/stack-findover/pen/KKaJarq %}