Accordion in Jquery UI

Date Published: 05/05/2020Published By: JaiSchool

A pair, including header and content, is known as an accordion. In accordion, the content of it may be hidden. It appears when the header is clicked. And disappears when clicked again. It has a toggle effect.

You need to write a predefined syntax for the accordion, according to Jquery UI which is given below and then we use an accordion() method.

The benefit of using accordion is, we can save space on the screen.

The syntax to create an accordion in Jquery UI

  • Create the main container using <div class="accor"></div>
  • Use h1 to h6 heading tags in it for heading <h1></h1>
  • Create a div container for writing accordion content in it <div><p>Content</p></div>
  • Now, select the main container through class value in the JS page & apply the method $(".accor").accordion();
<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI Accordion</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>
<div class="accor">
	<h1>About Us</h1>
	<div>
	<p>Thank You landing on Jaischool.com. Here you will learn programming languages.</p>
	</div>
</div>

<script>
	$(document).ready(function(){
		$(".accor").accordion();
	});

	</script>
</body>
</html>

This accordion() method has a collection of some options to enhance the functionality of an accordion which are the following:-

Options of accordion() Widget/method in Jquery UI

OptionValueExample
collapsibletrue or falseCheck
activeTab's Indexing numberCheck
animateTime (in milliseconds)Check

collapsible option of the accordion() method

This enables the toggle effect.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Accordion</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>
<div class="accor">
  <h1>About Us</h1>
  <div>
  <p>Thank You landing on Jaischool.com. Here you will learn programming languages.</p>
  <img src="https://jaischool.com/wp-content/uploads/2019/12/Jaischool.com_-e1575352026662.png">
  </div>
</div>

<script>
  $(document).ready(function(){
    $(".accor").accordion({
      collapsible:true,
    });
  });

  </script>
</body>
</html>

active option

Active property works with collapsible. otherwise, it will not work. Give accordion's indexing number in its value. The indexing number starts from 0. Therefore, the indexing number for the first accordion will be 0, for second accordion 1 and so on.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Accordion</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>
<div class="accor">
  <h1>About Us</h1>
  <div>
  <p>Thank You landing on Jaischool.com. Here you will learn programming languages.</p>
  </div>

  <h1>Contact Us</h1>
  <div>
  <p>Thank You for contacting us.</p>
  </div>
</div>

<script>
  $(document).ready(function(){
    $(".accor").accordion({
      collapsible:true,
      active:1
    });
  });

  </script>
</body>
</html>

animate option

You will see some transition effect while toggling (When accordion is opened or closed).

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI Accordion</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>
<div class="accor">
	<h1>About Us</h1>
	<div>
	<p>Thank You landing on Jaischool.com. Here you will learn programming languages.</p>
	</div>
</div>

<script>
	$(document).ready(function(){
		$(".accor").accordion({
			collapsible:true,
			animate:1000,
		});
	});

	</script>
</body>
</html>

Important Classes To Modify Design Of Accordion

  • ui-accordion-header (For accordion header)
  • ui-state-active (For accordion which is active)

You can design accordion by using these class values.

Example-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Accordion</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
  .ui-accordion-header{background:red;}
  .ui-state-active{background-color:green;}
</style>
</head>
<body>
<div class="accor">
  <h1>About Us</h1>
  <div>
  <p>Thank You landing on Jaischool.com. Here you will learn programming languages.</p>
  </div>
<!--starting second accordion coding-->
  <h1>Contact Me !!!</h1>
  <div>
  <p>Thank for coming here to contact me.</p>
  </div>
<!--end second accordion-->
</div>


<script>
  $(document).ready(function(){
    $(".accor").accordion({
      collapsible:true,
      active:1,
      animate:200,
    });
  });

  </script>
</body>
</html>

To design header, set any class or id value or select in CSS and design in your own way.

If you want to custom design anything else, you can simply do it by setting a class or id value to that element.

Publish A Comment

Leave a Reply

Your email address will not be published.