CODEWITHSUNDEEP
javascriptjqueryonclickoverlappingonmousedown
user2985093
user2985093

Reputation: 63

Prevent onmousedown elements from overlapping, becoming visibly nested

I have a few hidden divs which reveal themselves "onmousedown." However, you have to click the link twice for the hidden content to disappear. I'd like the content to disappear when you click any other "onmousedown" link on the page, instead of having to click the same link twice. It ends up that, if you don't click the link twice, and you click another onmousedown link, the content becomes nested and overlaps. Here's the code I'm using to toggle visibility:

function toggleVisibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

Here's the jsfiddle. (Forgive me -- for some reason the jquery isn't functioning. Perhaps some expert will see where I copied things incorrectly, but otherwise I think one can see pretty clearly what's going on -- just imagine the hidden content for each div appearing all at once nested below the links.)

Upvotes: 0

Views: 217

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

Try

<div class="nav">
    <a href="#hello">Hello</a>
    <a href="#hi">Hi</a>
    <a href="#howdy">Howdy</a>
</div>

<div class="sub" id="hello">a
    Hello hello hello
</div>

<div class="sub" id="hi">
    Hi hi hi hi hi hi
</div>

<div class="sub" id="howdy">
    Howdy Howdy Howdy
</div>

then

jQuery(function () {
    var $subs = $('.sub');
    $('.nav a').on('mouseenter', function () {
        var $target = $($(this).attr('href'));
        $subs.not($target).hide();
        $target.toggle();
    });
});

Demo: Fiddle

Why your fiddle was not working? You were using the function toggleVisibility in the inline mode where the function will be looked up in the global scope, but you added your function definition in the onload callback(selected onload in the second dropdown in the left panel) making in a closure scoped function. Select Nowrap Header/Body to fix it.

Why your code was not working? whenever you do a mouseover you need to first hide the previously opened navigation item then open the new one. It is much easier to do with jQuery way, so in my solution I adapted a jQuery solution as given above.

Upvotes: 1

Related Questions