CODEWITHSUNDEEP
javascriptjquerycsshtml
user2886091
user2886091

Reputation: 725

let div visible only when other div is visible

I am trying to let one div visible only when other div/divs are visible or hovering menuButton.

Example:

When I hover one button of my menu, my "hiddenDiv" will appear. It should remain visible until I leave mouse from my hiddenDiv. After that the hiddenDiv becomes hidden again.

When I click on my hiddenDiv, when it is visible, another div will appear. My hiddenDiv should now remain visible, until the new div (i have multiple of these) is visible.

CODE

js:

$('#menuButton').mouseover(function() {
$('#pasMenTypy').hide();
$('#aktMenTypy').show();
$('.hiddenDiv').show();

$('.hiddenDiv').mouseover(function() {
$('.hiddenDiv').show();
    }); 
});

if($('#div1').is(':visible') || $('#div2').is(':visible') || $('#div3').is(':visible') || $('#div4').is(':visible') || $('#div5').is(':visible') || $('#div6').is(':visible') || $('#div7').is(':visible') || $('#div8').is(':visible')) {

$('.hiddenDiv').show();

} else {

$('.hiddenDiv').mouseout(function() {
$('.hiddenDiv').hide();
 });
}

It is currently showing the hiddenDiv, when hovering menuButton, but it is not remaining visible, when div1 or div2 or ... or div8 is visible. Can you help please?

EDIT: Here is fiddle: http://jsfiddle.net/8SPj3/ ... I want hiddenDiv appear when I am hovering menuButton1, when I am hovering menuButton2 I would like it to hide. When I click "blah" from hiddenDiv I want div1 to be visible and I also want my hidden div to remain visible. Now, only when I click on menuButton2 hiddenDiv will hide.

Upvotes: 0

Views: 134

Answers (2)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

change the code like

    $('#menuButton').mouseover(function () {
        if ($('#div1').is(':visible') || $('#div2').is(':visible') || $('#div3').is(':visible') || $('#div4').is(':visible') || $('#div5').is(':visible') || $('#div6').is(':visible') || $('#div7').is(':visible') || $('#div8').is(':visible')) {
            $('.hiddenDiv').show();
        }
    });


    $('#menuButton').mouseout(function () {
        $('.hiddenDiv').hide();
    });

Edit

Fiddle

Updated fiddle

Upvotes: 1

kp singh
kp singh

Reputation: 1460

try this code:

$('#menuButton').mouseover(function() {
    $('#pasMenTypy').hide();
    $('#aktMenTypy, .hiddenDiv').show();
});

if ($('#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8').is(':visible')) {
    $('.hiddenDiv').show();
} else {
    $('.hiddenDiv').hide();
}

Upvotes: 0

Related Questions