jQuery UI & Accordion: Open On Hoverintent

This entry is part 4 of 7 in the series jQuery UI Accordion

jQuery UI Accordion – Open on hoverintent

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Accordion - Open on hoverintent</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#accordion').accordion({
                event: 'click hoverintent'
            });
        });

        /*
         * hoverIntent | Copyright 2011 Brian Cherne
         * http://cherne.net/brian/resources/jquery.hoverIntent.html
         * modified by the jQuery UI team
         */
        $.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,
                        args = arguments,
                        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='accordion'>
    <h3>Section 1</h3>

    <div>
        <p>
            Content of section 1.
        </p>
    </div>
    <h3>Section 2</h3>

    <div>
        <p>
            Content of section 2.
        </p>
    </div>
    <h3>Section 3</h3>

    <div>
        <p>
            Content of section 3.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>

    <div>
        <p>
            Content of section 4A.
        </p>

        <p>
            Content of section 4B.
        </p>
    </div>
</div>


</body>
</html>
Try The Code

Series Navigation<< jQuery UI & Accordion: Allow All Sections To Be Collapsible
jQuery UI & Accordion: Customize Icons >>