Question

So I’m using .show() and .hide() to well, show and hide some elements on my page on certain triggers. Say I have 3 divs on top of eachother and I expand the top one, the content from one of the bottom ones doesn’t seem to move until I mouseover it. I’m having this happen in multiple projects with totally different layouts. Is there a generic cause/fix for this?

After clicking “expand”:

After moving my mouse over the element:

Javascript:

    //expand details per container
    $('.Trigger').live('click', function () {
        var thisid = $(this).attr('toggletrigger');
        if ($(thisid).css('display') == 'none') {
            $(thisid).show();
            $(this).css('background-image', 'url("../Content/themes/base/images/btn_expandcollapse_small-2.png")');
        } else {
            $(thisid).hide();
            $(this).css('background-image', 'url("../Content/themes/base/images/btn_expandcollapse_small-1.png")');
        }
    });

HTML

<span class="Trigger" toggletrigger=".GeneralHidden">

<div class="Section">
    <span class="GeneralHidden Hidden">
        //other stuff here that *shouldn't* be relevant.
    </span>
</div>

<div class="Section">
    //other stuff here that *shouldn't* be relevant.
</div>

CSS

.Hidden             {display: none;}
.GeneralHidden      {}
.Section            {margin: 0px; padding: 0px;
                     padding-top:5px;
                     background-color: #FBFBFB;
                     border: 1px solid #FBFBFB;
                     border-left: 3px solid gray;}
.Section:hover      {background-color: White; border: 1px solid gray; border-left: 3px solid gray;}

I’ve confirmed it’s something to do with the

            <div class="Section">
                This is a test.
            </div>

^^^ Adding this code after an expandable item works properly.

            <div class="Section">
                <fieldset>
                This is a test.
                </fieldset>
            </div>

^^^ Adding this code exhibits the same errant behavior as before. I have NO css applied to fieldsets.

Answer 1

This just seems to be an issue with using the fieldset tag. Works fine without it.