Simple Accordion jQuery

October 18, 2020

Rahul

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.

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>

Step:2

Then we need to add code for style.css which code i provide in 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;
}

Output:

Leave a Comment Cancel reply