Demo of Accordion get and set icons option

About JQuery

JQuery is a library of JavaScript functions. This is used to generate many front end functionality without writing all the codes. We can just include these libraries to use different widgets, functions and much more to develop an interactive web page.

How to Use

To include these JQuery libraries , either we can download the JavaScript files or we can directly link them from some hosted servers where these files are kept.

Advantage of JQuery

We can show animations, connect to backend script, show calendars to select date, show progress bar and develop many interactive script for better user experience. We can do all these by writing few lines of code by using these libraries.

System Requirement

JQuery runs at client end browser so any browser with script execution enabled can run JQuery.


<script src=''></script>
<script src=''></script>
<link href='' rel='stylesheet'>
<div id='accordion' class='accordion'>
 <div class='header'>Header 1 ( panel No. 0 )</div>
  <div class='content'>
    Text about Header 1  
 <div class='header'>Header 2 ( panel No. 1 )</div>
  <div class='content'>
    Text about Header 2    
<div class='header'>Header 3 ( panel No. 2 )</div> 
  <div class='content'>
    Text header 3
<div class='header'>Header 4 ( panel No. 3 )</div>
  <div class='content'>
    Text about Header 4.
<br><br><input type='radio' name='r1' id='r1' value='plus' >Plus  <input type='radio' name='r1' id='r2' value='default' checked>Default
<div id=d1></d1>

$(document).ready(function() {
$( '#accordion' ).accordion({
collapsible: false,
//heightStyle: "content"

$("input:radio[name=r1]").click(function() {
var sel=$(this).val();

$( ".accordion" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
$( ".accordion" ).accordion( "option", "icons", {  "header": "ui-icon-triangle-1-e",  "activeHeader": "ui-icon-triangle-1-s"} );}

var get_v = $( "#accordion" ).accordion( "option", "icons" );
$('#d1').text("Header :" + get_v.header + " , activeHeader : " + get_v.activeHeader)