Combined Example of the Different Options

Menu 1

This is some placeholder content in a p element.

Menu 2

This is a combination of the features previously shown involving changed icons, hoverintent, the ability to collapse all panels, and sizing to content.

Code

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css"/>
    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

        <script type="text/javascript">
            // $(function() { code }); executes the contained code when the DOM is finished loading
    	    $(function()
            {
                $("#example").accordion( // Call the accordion method on the element with the id example
                {
                    event: "click hoverintent", // Set the events that trigger expanding the panel
                    collapsible: true, // Allow all the panels to be collapsed
                    icons: // Use custom icons
                    {
                        // Set icons' header option to desired icon
                        "header": "ui-icon-arrowthick-1-s",
                        // Set icons' activeHeader option to desired icon
                        "activeHeader": "ui-icon-arrowthick-1-e"
                    },
                    heightStyle: "content" // Size panels to the size of content
                });
            });
                        
            // *** The hoverintent code is modified from jqueryui.com/accordion/#hoverintent ***
    	    $.event.special.hoverintent =
            {
    	        setup: function ()
    	        {
    	            $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
    	        },
    	        teardown: function ()
    	        {
    	            $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
    	        },
    	        handler: function (event)
    	        {
    	            var currentX, currentY, timeout,
                    target = $(event.target),
                    previousX = event.pageX,
                    previousY = event.pageY;

    	            function track(event)
    	            {
    	                currentX = event.pageX;
    	                currentY = event.pageY;
    	            };

    	            function clear()
    	            {
    	                target
                        .unbind("mousemove", track)
                        .unbind("mouseout", clear);
    	                clearTimeout(timeout);
    	            };

    	            function handler()
    	            {
    	                var prop,
                        orig = event;
    	                if ((Math.abs(previousX - currentX) +
                        Math.abs(previousY - currentY)) < 7)
    	                {
    	                    clear();
    	                    event = $.Event("hoverintent");
    	                    for (prop in orig)
    	                    {
    	                        if (!(prop in event))
    	                        {
    	                            event[prop] = orig[prop];
    	                        }
    	                    }
    	                    // Prevent accessing the original event since the new event
    	                    // is fired asynchronously and the old event is no longer
    	                    // usable (#6028)
    	                    delete event.originalEvent;
    	                    target.trigger(event);
    	                }
    	                else
    	                {
    	                    previousX = currentX;
    	                    previousY = currentY;
    	                    timeout = setTimeout(handler, 100);
    	                }
    	            };

    	            timeout = setTimeout(handler, 100);
    	            target.bind(
                    {
    	                mousemove: track,
    	                mouseout: clear
    	            });
    	        }
    	    };
        </script>
    </head>

    <body>
        <div id="example">
            <h3>Menu 1</h3>
            <p>This is some placeholder content in a p element.</p>
            <h3>Menu 2</h3>
            <p>This is more placeholder content in a second p element.
                It is coded directly below an h element which jQuery's
                accordion method turns into the header you see above this content.
            </p>
            <h3>Code</h3>
            <pre> *** This is what you are viewing *** </pre>
        </div>
    </body>
</html>