jquery ui accordion expanding in one click but not collapsing in second click

Question

i have accordion while clicking once its expanding (opening) but while i clicking again on that its not closing the accordion. how to change the function so that i can close the accordion when i click second time to the accordion.

 $(function() { var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; $("#accordion").accordion({ icons: icons }); $("#toggle").button().on("click", function() { if ($("#accordion").accordion("option", "icons")) { $("#accordion").accordion("option", "icons", null); } else { $("#accordion").accordion("option", "icons", icons); } }); }); 

 <section class="content"> <h1 style="color:#B94A7E"> header 1</h1> <div id="accordion"> <h3 style="font-size:16px">header 3</h3> <div> <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <font color="#5a5453"> 4. The actual IoT platform that builds, connects and manages includes all APIs, Web services, application services, agents, connectivity etc </font> </td> </tr> <tr> <td></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </div> 

Answer 1

Quick fix, set collapsible:true in your accordion option. For eg

$("#accordion").accordion({
   collapsible: true
});

See the JsFiddle

Answer 2

An accordion doesnot allow more than one content panel to be open at the same time.Read JQuery UI documentation for Accordion.Usually what you want to achieve can be written with few line of jquery code itself as below

$('#accordion').click(function() {
    $(this).next().toggle('slow');
});

Demo

Answer 3

http://jsfiddle.net/g8yoqmsL pasted your code and fixed in fiddle.

 $( "#accordion" ).accordion({
   collapsible: true
 });

Docs here http://jqueryui.com/accordion/#collapsible