Question

The following code:

        <script type="text/javascript" >
            $("#accordion > li > div").hover(function () {
                if (false == $(this).next().is(':visible')) {
                    $('#accordion ul').slideUp(300);
                }
                $(this).next().slideToggle(300);
            });
        </script>

When the user hovers over the li>div item it will cascade down but by the time i see the options it will cascade back up.

edit: the slide up speed seems to work nice at 300 miliseconds but i want to keep it display for 3 secodns then roll back up?

How do i hold the cascade for the a few seconds? so that the user can click on an li item?

EDIT: ADDED MY JSFIDDLE – http://jsfiddle.net/dttdB/

Answer 1

New Answer

allright, sounds like you’re new to javascript. Congrats on finding jQuery, it will definitely be a close friend of yours!! Now I’ll show you jQuery-ui accordion

css

<!-- language: lang-css -->
    #accordion h3 {
        background-color:grey;
        background-repeat: no-repeat;
        /*border-radius: 10px 10px 10px 10px;*/
        cursor: pointer;
        display: block;
        font-weight: bold;
        height: 48px;
        list-style: circle outside none;
        margin: 1px;
        width: 230px;
    }

html

<!-- language: lang-html -->
    <div id="leftWrap">
        <div id="accordion">
            <h3>Absorption</h3>
            <div>
                <ul>
                    <li><a href="c-77-accessories.aspx">Accessories</a><ul>
                        <li><a href="c-81-aa500afg.aspx">AA500AFG</a></li>
                        <li><a href="c-79-aa500f.aspx">AA500F</a></li>
                        <li><a href="c-80-aa500g.aspx">AA500G</a></li>
                        <li><a href="c-78-aa990f.aspx">AA990F</a></li>
                        </ul>
                    </li>
                    <li><a href="c-82-consumables.aspx">Consumables</a></li>
                    <li><a href="c-76-products.aspx">Products</a></li>
                </ul>
            </div>
            <h3>Fluorescence</h3>
            <div>
                <ul>
                    <li><a href="c-101-accessories.aspx">Accessories</a></li>
                    <li><a href="c-102-consumables.aspx">Consumables</a></li>
                    <li><a href="c-100-products.aspx">Products</a></li>
                </ul>
            </div>
        </div>
    </div>

javascript

 <!-- language: lang-js -->
    $("#accordion").accordion({ header: 'h3',
                                event: 'mouseover',
                                active:false });

---

Old Answer

with some html i can give a better answer, but in general i think you need to bind to both function() options in .hover()

    <script type="text/javascript" >
            $("#accordion > li > div").hover(function (event) {
//the user has moved their mouse on top of the selected Div "#accordion > li > div"
//this will 'slide' whatever is next to the div
              $(this).next().slideToggle(300);
             }, function(event){
//the user has moved their mouse away from the selected Div "#accordion > li > div"
//warning, they may be trying to click on a link in the $(this).next(), don't close on them!
//I will need some html to help more than this
             });
        </script>

js-fiddle

I think i did this right