w3resource logo


jquery UI exercises

jQuery UI: Initialize the accordion and active the second option


jQuery UI Fundamental - I : Exercise-1

Convert three headers and content panels into an accordion. Convert three headers and content panels into an accordion. Initialize the accordion and active the second 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 active the second option.</title>
</head>
<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<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 :

 $( "#accordion" ).accordion({
  active: 1
});
var active = $( "#accordion" ).accordion( "option", "active" );

$( "#accordion" ).accordion( "option", "active", 1 );
Initialize the accordion and active the second option. on jsbin.com

Improve this sample solution and post your code through Disqus.



Join our Question Answer community to learn and share your programming knowledge.

Help the community:

Python: Fizzbuzz

C++: Decimal to binary conversion

JavaScript: Need Help in JavaScript

Python: Help me with this program