Question

I’ve created a toggle that I want to work in the following way:

Basically, the user will hover over “All runs” and the toggle will appear in place of the word “All”. The user can then switch it to “Last N”, enter a value, then mouse off and see their adjustment.

I have the toggle built and it’s showing on hover, but I have two problems:

• It’s displaying inline, but still showing the word “All”…I’m not sure how to make this not display.

• I can’t use the toggle because it disappears when I try to click it because of a gap.

SOLUTION FIDDLE.

SOLUTION:

Per the comments below, I had to add a wrapper div to capture the mouseover.

<div class='wrapper'>
    <div class='runType'>All </div>
    <div class='toggle'>
        <div class='all active'>All</div>
        <div class='last'>Last <input class='in' type='text' size='1' placeholder='N' /></div>   
    </div>
    <div class='runs'>runs</div>
</div>

Answer 1

You need to wrap the entire thing in a div and then attack the mouseover to the wrapper, also add the hide commands to hide the “All” word:

<div id='wrapper'>
<div class='allText'>All </div>
<div class='toggle'>
    <div class='all active'>All</div>
    <div class='last'>Last <input class='in' type='text' size='1' placeholder='N' />       </div>   
</div>
<div class='runs'>runs</div>
</div>

JS:

$('#wrapper').mouseover(function() {
$('.toggle').css('display','inline');
$('.allText').hide();
}).mouseleave(function() {
   $('.toggle').hide();
   $('.allText').show()
});

here’s the fiddle:

http://jsfiddle.net/MeVX8/10/