CODEWITHSUNDEEP
jqueryhtmlcss
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to toggle inner content when hovered over parent

How can I add a script which will expand the "section # inner" UL when hovered over the parent LI.

For example, hovering over "Section 1" will toggle the "Section 1 INNER" LI/UL.
I would like to make it dynamic, because I might have the same for "Section 3" or "Section 2"

JSFiddle: http://jsfiddle.net/34ng9sto/1/
JQuery:

    $(function () {
    $(".uSPInner").hide();
    if (!$(".uSPInner").is(":visible")) {
        $(this).closest("li").hide(); //hides the "LI" which gives the extra line... Not working.
        //alert("test");
    }
});

Example:

<ul>
    <li></li> //this will toggle the below LI because it has a nested UL
    <li> //hide this by default and toggle when hovered over the LI above it.
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li> //show this by default
    <li></li> //show this by default
</ul>

Upvotes: 0

Views: 56

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Use the JavaScript this way:

$(function () {
    $(".uSPInner").hide();
    if (!$(".uSPInner").is(":visible")) {
        $(this).closest("li").hide();
        //alert("test");
    }
    $(".clickMe").closest("li").hover(function () {
        $(this).closest("li").find("ul").slideDown();
    }, function () {
        $(this).closest("li").find("ul").slideUp();
    });
});

Fiddle: http://jsfiddle.net/34ng9sto/6/

Upvotes: 1

Related Questions