Question

Please don’t forget to upvote the great answer by my eventual savior Beetroot-Beetroot!

I’ve got this problem where .toggle() only shows on click, it never hides.

TL;DR: It normally looks like the screenshot below but the .toggle(); doesn’t hide when I click a second time.

The first div appears on a mouseover of the actual select box, taking any clicks it would receive on itself.

Normally clicking the first div which is the small div with 1px black border will show the second div, which works, and clicking again will hide it, which doesn’t work.(the click event works, the toggle fails)

Here’s the html of the elements, yeah it’s normally within a table cell:

<td style="vertical-align: top; text-align: left;">
<select class="placeholder0" id="sortedselect0">
<option selected="selected">- for - </option>
<option>adj. &nbsp; foraminated</option>
<option>adj. &nbsp; foraminiferous</option>
<option>adj. &nbsp; foraminous</option>
<option>adj. &nbsp; forbearant</option>
<option>adj. &nbsp; forbearing</option>
<option>adj. &nbsp; forbidden</option>
<option>adj. &nbsp; forbiddenly</option>
<option>adj. &nbsp; forbidding</option>
<option>adj. &nbsp; forblack</option>
<option>adj. &nbsp; forby</option>
<option>AND MANY MORE OPTIONS</option>
</select>

<div class="anti" id="anti0" style="height: 18px; width: 179px; position: absolute; top: 209px; left: 494px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; border-image: initial; background-color: transparent; display: block; "></div>

<div class="floats" style="display: none; position: absolute; top: 227px; left: 494px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; border-image: initial; " id="floatdiv0"><img style="width: 222px; height: 342px;" alt="" src="fake_iframe.png"></div>

Then the javascript which follows it directly

<script type="text/javascript">
//make original select box unselectable
jQuery(".placeholder0").mouseover(function() {
    var pos = jQuery(this).position();
    var width = jQuery(this).outerWidth();
    var height = jQuery(this).outerHeight();

    jQuery("#anti0").css({
        height: (height - 2) + "px",
        width: (width - 2) + "px",
        position: "absolute",
        top: pos.top + "px",
        left: pos.left + "px",
        border: 1 + "px solid black",
        z: 2,
        "background-color":"transparent"
    });
});

jQuery("#floatdiv0").unbind('click');

jQuery("#anti0").live('click', function(){

    // .position() uses position relative to the offset parent,
    // so it supports position: relative parent elements
    var pos = jQuery(this).position();

    // .outerWidth() takes into account border and padding.
    var width = jQuery(this).width();
    var height = jQuery(this).height();

//first hide any other fake selects
jQuery("div.floats").hide();
//and antiselect overlays
jQuery("div.anti").hide();

//unhide current antiselect overlay
jQuery("#anti0").show();

    //show the menu directly over the placeholder
    jQuery("#floatdiv1").css({
        position: "absolute",
        top: (pos.top + height) + "px",
        left: pos.left + "px",
        border: 1 + "px solid black",
        //padding: height + "px",
        z: 1    
    });
    jQuery("#floatdiv1").toggle();
});

//hides the menu  
jQuery("#floatdiv1").mouseleave(function() {
    jQuery("#floatdiv1").hide();
    //and unhide overlays
    jQuery("div.anti").show();
});
</script><br>
</td>

I threw the .unbind in there just to try, I’m not even sure what it’s for I’m afraid.

Same happened with live, just .click was fine.

//hides the menu was my old way of hiding the div window, just leaving it, which worked flawlessly.

I was considering resorting to

{
    if ( showOrHide == true ) {
        jQuery('#floatdiv1').show();
    } else if ( showOrHide == false ) {
        jQuery('#floatdiv1').hide();
    }
}

but I tested it and it didn’t work so perhaps I’m doing it wrong?

I wanted to add an example of the problematic code at work but somehow mister problem.php is completely not working when I copy the code from the usual pages to this new php page.

Please help me just toggle this div one way or another. >.<

Answer 1

With some assumptions …

Inside the click handler :

jQuery("div.floats").hide();
...
jQuery("#floatdiv1").toggle();

As #floatdiv1 also has class="floats", the nett effect of the command sequence above will always be to show it.

Try :

jQuery("div.floats").not("#floatdiv1").hide();//hide all other floats
...
jQuery("#floatdiv1").toggle();//toggle this float