Home/ Questions/Q 5956405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T18:15:09+00:00

I’m using the jQueryUI demo example and I’m trying to add in the open

  • 0

I’m using the jQueryUI demo example and I’m trying to add in the open on mouseover effect and to have all li’s closed at start. but for some reason it’s only doing the default 1 collapsed and click to collapse
http://jqueryui.com/demos/accordion/#mouseover

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });
            $("#accordion").accordion({ event: "mouseover" });                  
                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );

            });
        </script>
        <style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>    
    </head>
    <body>

        <!-- Accordion -->
        <h2 class="demoHeaders">Accordion</h2>
        <div id="accordion">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>




    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have two calls to initialize the accordion:

    $("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });

    This is why the mouseover effect is not working. To combine the options into one initialization call:

    $("#accordion").accordion({ header: "h3", event: "mouseover" });

    Additionally, if you want all of the sections collapsed initially, add the active option and set it to false:

    $("#accordion").accordion({
    header: "h3",
    event: "mouseover",
    active: false
});

    Here’s a working example: http://jsfiddle.net/HjK5T/

    • 0