All geek questions in one place

JQuery Accordion breaks after first click when active: false set

I already had a jQuery accordion on my site and it seemed to work fine until I checked it today and it is broken. I haven't touched HTML in a few weeks. I reviewed the accordion documentation again and nothing seemed to have changed, so I don't know what is going on.

I had the "active" property of the accordion set to false, so the accordion did not display the active section when loading the document. I also had a "collapsible" set to "true" as indicated in the documentation. To be sure that this was not another element on the page, I created a whole new page with only the most basic elements of the accordion on it, and it still won’t work.

The problem is that after clicking on the first section of the accordion, clicking on any of the others does not work - you are stuck in this section. I noticed that removing the “active” property completely fixed this problem, but then, of course, the active section is open to load the document, 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>

, active: false : true, "" , - , /.

+3
2

, :

<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>

( ), jQuery, jQuery. , , , jQuery , UI Accordion.

- . (1.8.7) , . , alwaysOpen . docs , .

, , jsFiddle:

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

heightStyleType

. :

  • "" . .

  • "fill" . .

  • "content" . , .

:

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

Source: https://habr.com/ru/post/1785313/

More articles:


All Articles