w3resource

jQuery UI: Initialize the accordion and specify the header option

jQuery UI Fundamental - I : Exercise-6

Convert three headers and content panels into an accordion. Initialize the accordion and specify the header option.

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Initialize the accordion and specify the header option.</title>
</head>
<body>
<div id="divid">
<h2>jQuery</h2>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h2>jQuery UI</h2>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h2>jQuiry Mobile</h2>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>
</html>

JavaScript Code :

$( "#divid" ).accordion({
  header: "h2"
});

var header = $( "#divid" ).accordion( "option", "header" );
 
$( "#divid" ).accordion( "option", "header", "h2" );

See the Pen jquery-ui-fundamental-exercise-6 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Convert three headers and content panels into an accordion. Initialize the accordion and specify the event (e.g. mouseover).
Next: Convert three headers and content panels into an accordion. Initialize the accordion and specify the height.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/jquery-ui-exercises/1/jquery-ui-fundamental-exercise-6.php