Jquery hide/show div on focus() and blur() not working

Question

I'm trying to show help or additional information to users when they focus on certain fields.

To do that, I have a hidden div below a set of input controls. On focus in those fields I want to show the required div, and when those controls loses focus, I want to hide it again.

My jquery looks like this (for simplicity I have removed the logic that determined which div to show, and have simply hardcoded the name:

                $('.showDetail' ).focus(
                    function () {                            
                        $('#divRoofUpperDetail').show();
                    }
                );

                $('.showDetail').blur(
                    function () {
                        $('#divRoofUpperDetail').hide();
                    }
                );

My hidden div looks like this:

<div class="form-group" id="divUpperRoofDetail">
    <div class="col-sm-12 hidden-xs thumbnail">
        <img src="images/Assets/RoofDetail.jpg" alt="" />                                        
    </div>
</div>

The controls which I want the events to fire from have the showDetail class, and if I put an alert in the jquery functions, I see those alerts fire, but the divs dont hide and show.

If I put the $('#divRoofUpperDetail').hide() or .show() in document.ready, it does what I expect. On focus and blur, it doesn't.

Answer 1

If that is actually the code you are running and not just a typo, it seems to me the issue is that you have mis-typed the name of your div in your jQuery code.

You switched UpperRoof with RoofUpper.