CODEWITHSUNDEEP
javascriptjqueryhtml
Priya
Priya

Reputation: 69

jquery accordion mouseover and mouseout on navigation of vertical menu

below is my code and i want when i mouse hover the Link CMT its div will open and when i mouse out its div closed. .....

<div class="wrap">

        <ul class="accordion1">
            <li>
                <h2 id="first">CMT</h2>
                <div class="content">
                    contents of 1st
                </div>
            </li>
            <li>
                <h2>FOIS</h2>
                <div class="content">
                    contents of 2nd
                </div>
            </li>
            <li>
                <h2>ASP</h2>
                <div class="content">
                    contents of 3rd
                </div>
            </li>
            <li>
                <h2>PTT</h2>
                <div class="content">
                    contents of 4th
                </div>
            </li>
        </ul>
    </div>

Upvotes: 0

Views: 5000

Answers (2)

MSAF_Inc
MSAF_Inc

Reputation: 1

I've got a similar solution, but using hover() instead:

$(document).ready(function(){
    $('h2').hover(function(){
        $(this).next().css("display","block");
    },function(){
        $(this).next().css("display","none");   
    });
});

jsFiddle Demo

Actually, I like the .show() / .hide() methods better with this:

$(document).ready(function(){
    $('h2').hover(function(){
        $(this).next().show('fast');
    },function(){
        $(this).next().hide('fast');   
    });
});

jsFiddle Demo 2

Not to overdo this or anything, but came across a really interesting solution from another stackoverflow question here:

HOVERINTENT Plugin Solution

Last update though, I promise!

Upvotes: 0

Anton
Anton

Reputation: 32581

Try this

$('h2').on('mouseenter', function () {
    $(this).next().show();
}).on('mouseleave', function () {
    $(this).next().hide();
});

DEMO

incase you want the want the content to be shown when you hover over that too you could do this

$('li').on('mouseenter', function () {
    $(this).find('.content').show();
}).on('mouseleave', function () {
    $(this).find('.content').hide();
});

DEMO

Upvotes: 3

Related Questions