Home/ Questions/Q 3697764
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T04:53:58+00:00

I’ve had a jQuery accordion on my site for a bit now, and it

  • 0

I’ve had a jQuery accordion on my site for a bit now, and it seemed to be working fine until I checked on it today and it is broken. I haven’t touched the HTML in weeks. I’ve gone through the accordion documentation all over again, and it doesn’t seem anything has changed, so I have no clue what is going on.

I had the accordion “active” property set to “false”, so that the accordion would not display an active section on document load. I also had “collapsible” set to “true”, like the documentation specified. Just to be sure it wasn’t another element on the page, I created a whole new page with just the most basic accordion elements on it, and it still won’t work.

The problem is that, after clicking on the first accordion section, clicking on any of the other ones doesn’t work- you’re stuck with that section open. I noticed that removing the “active” property altogether fixed this problem, but then of course there is an active section open on document load, which I don’t want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
  $(document).ready(function() {
    $("#accordion").accordion({active: false, alwaysOpen: true, autoHeight: false, collapsible: true});
  });
</script>
</head>
<body>
<div id="accordion">

    <p><a href="#">1</a></p>
    <div>this</div>

    <p><a href="#">2</a></p>
    <div>isn't</div>

    <p><a href="#">3</a></p>
    <div>working</div>

    <p><a href="#">4</a></p>
    <div>correctly</div>

</div>
</body>
</html>

I also noticed that if I remove active: false, and leave collapsible: true, I am only able to “collapse” a section twice, and then the same thing happens- the sections lock up and stop collapsing/opening.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, I immediatly saw the following problem:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    By not specifying the revision (last third digit in the version) you will automatically get served the latest version of both jQuery and jQuery UI. So why it suddenly stopped working for you was because jQuery UI got updated, and changes were made to the UI Accordion.

    Best way to solve this is to specify the revision. Walk down from the current version (1.8.7) and downwards until it’s working for you. For example, the alwaysOpen open have been removed or changed. You should check the docs and see which options are available.

    Also, you can try this which I’ve got working on jsFiddle:

    $(function(){
    $("#accordion").accordion({
        active: false,
        autoHeight: false,
        collapsible: true
    });
});
    • 0