CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapjquery-ui
Swapna
Swapna

Reputation: 403

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

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>

Upvotes: 1

Views: 1010

Answers (3)

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

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

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

See the JsFiddle

Upvotes: 3

justtry
justtry

Reputation: 639

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

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

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

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

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

Upvotes: 0

Related Questions