DEV Community

Cover image for Accordion jQuery examples with source code
Stackfindover
Stackfindover

Posted on • Updated on

Accordion jQuery examples with source code

#tutorial #html #css #javascript

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:

Top comments (2)

Collapse
 
wasasquatch profile image
Jordan Thompson • • Edited

Very nice. You can also use jQuery UI which already has an accordion system you can style. It also has useful settings. I actually just recently created a small script to create dynamic drop downs where ever I want without needing to setup jQuery code for them.

.nwda-accordion is the class container to trigger an accordion.

jQuery( document ).ready( function( $ ) {

    $('.nwda-accordion').each(function(){

        if ( $(this).data("settings") ) {

            var dataSettings = $(this).data("settings")

            if  ( typeof dataSettings !== 'undefined' ) {
                var accordionSettings = JSON.parse( dataSettings.replace(/'/g, '"') );              
            }

            if ( typeof accordionSettings !== 'undefined' && Array.isArray( accordionSettings ) ) {
                $(this).accordion( accordionSettings );
            } else {
                $(this).accordion({ header: 'h3', collapsible: true, active: false, heightStyle: 'content' });
            }

        } else {
            $(this).accordion({ header: 'h3', collapsible: true, active: false, heightStyle: 'content' });
        }

    });

});
Enter fullscreen mode Exit fullscreen mode

Usage HTML

<div class="nwda-accordion" data-settings="{ 'header': 'h3', 'collapsible': 'false', 'active': 'true', 'heightStyle': 'content' }">
<h3>Accordion Header</h3>
<div><strong>Testing!</strong></div>
</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rahul7733 profile image
Rahul7733 •

Cool

Read next

bellatrix profile image

LOOPS - FOR LOOP

Sakshi -

stephikebudu profile image

: vs :: in CSS3

Stephany Ikebudu -

mellen profile image

Use your own neural net to generate images

Matt Ellen -

altay profile image

Chrome DevTools: CSS Overview Panel

Altay Karakuş -