Why does my mouseover event only fire on the first item in my grid?

I have an asp GridView with an item template in which i'm populating data. One of my controls is a link, above a div, that I've written some jQuery for its hover event to display the div underneath. The div underneath has some .css to to make it display none by default. When I hover over the link, the jQuery displays the div  (and its contents)  ( in other words it changes the display property to block, as it should)BUT ONLY FOR THE VERY FIRST ROW (item) IN MY GRID. Why does my jQuery only work for the first item in my grid. I'm using boostrap, C# in visual studio 12. see images and code below.

MY .CSS
        #hidden {
            display: none;
        }

Open in new window


MY jQuery
    <script type="text/javascript">
        //THIS jQuery CODE SIMPLY ADDS SOME HORIZONAL SPACE IN BETWEEN MY RADIO BUTTON ITEMS.
        $(document).ready(function () {

            $(".radioButtonSpace tr td").css("padding", "0 10px 0 0");

            $(".divFadeInOut").fadeToggle(4000);

            $("#hoverUnhide").mouseover(function () {
                $("#hidden").css("display", "block");
            });

            $("#hoverUnhide").mouseout(function () {
                $("#hidden").css("display", "none");
            });

        });
    </script>

Open in new window


MY HTML (my item template within my GridView)
<ItemTemplate>
                                                    <br />
                                                    <br />
                                                    <div class="col-xs-2 hidden-sm hidden-md hidden-lg"></div>
                                                    <div class="col-xs-12 col-sm-6 col-md-6">
                                                        <div class="row">
                                                            <asp:Label ID="lblIndex" runat="server" Text='<%# Eval("INDEX") %>' Visible="false"></asp:Label>
                                                            <div class="col-xs-12 col-sm-5 col-md-4" style="background-color: lavender;">
                                                                <b>First Name:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-7 col-md-6" style="background-color: lavenderblush;">
                                                                <asp:Label ID="lblFIRSTNAME" runat="server" Text='<%# Eval("FIRST") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-4">
                                                                <b>Last Name:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-7 col-md-6">
                                                                <asp:Label ID="lblLASTNAME" runat="server" Text='<%# Eval("LAST") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-4">
                                                                <b>Phone:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-7 col-md-6">
                                                                <asp:Label ID="lblPHONE" runat="server" Text='<%# Eval("PHONE") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div class="hidden-xs col-sm-12 col-sm-4 col-md-4">
                                                                <b>Email:</b>
                                                            </div>
                                                            <div class="hidden-xs col-sm-12 col-md-6">
                                                                <asp:Label ID="lblEMAIL" runat="server" Text='<%# Eval("EMAIL") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div runat="server" class="col-xs-12 visible-xs" id="hoverDisplay">
                                                                <div class="hidden-sm hidden-md hidden-lg">
                                                                    <a id="hoverUnhide" class="emailLink"><b>Clik here to email:</b></a>
                                                                </div>
                                                                <div id="hidden">
                                                                    <asp:Label ID="lblHiddenEMAIL" runat="server" Text='<%# Eval("EMAIL") %>' Visible="true" Font-Size="X-Small"></asp:Label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <br />
                                                    </div>
                                                    <div class="col-xs-2 hidden-sm hidden-md hidden-lg">
                                                    </div>
                                                    <div class="col-xs-10 col-sm-6 hidden-xs visible-sm visible-md visible-lg" style="background-color: lavenderblush;">
                                                        <div class="row">
                                                            <div class="col-xs-12 col-sm-5 col-md-6" style="background-color: lavender;">
                                                                <b>Address 1:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-7 col-md-6">
                                                                <asp:Label ID="lblADDRESS1" runat="server" Text='<%# Eval("ADDRESS1") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <b>Address 2:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <asp:Label ID="lblADDRESS2" runat="server" Text='<%# Eval("ADDRESS2") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <b>City:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <asp:Label ID="lblCITY" runat="server" Text='<%# Eval("CITY") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <b>State:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <asp:Label ID="lblSTATE" runat="server" Text='<%# Eval("STATE") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <b>Zip:</b>
                                                            </div>
                                                            <div class="col-xs-12 col-sm-5 col-md-6">
                                                                <asp:Label ID="lblZIP" runat="server" Text='<%# Eval("ZIP") %>'></asp:Label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <br />
                                                    <!--Specifications (right col)
                                                    ***NOTE: THIS COLUMN IS VISIBLE ON XS DEVICES...A BUTTON IS REVEALED & BY CLICKING IT A PANEL (pnlExtras) BECOMES VISIBLE-->
                                                    <div class="col-xs-10 col-sm-4 col-md-4 col-lg-4 visible-xs hidden-sm hidden-md hidden-lg">
                                                        <div class="panel-group" id="accordion">
                                                            <div class="row">
                                                                <div class=" col-xs-10 hidden-sm hidden-md hidden-lg">
                                                                    <asp:LinkButton ID="btnViewMore" runat="server" CssClass="btn btn-primary" Text="+ More Info." HeaderStyle-CssClass="visible-xs visible-sm visible-md hidden-lg" CommandName="showHide" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>">
                                                                    </asp:LinkButton>
                                                                </div>
                                                            </div>
                                                            <asp:Panel ID="pnlExtras" runat="server" Visible="false">
                                                                <div>
                                                                    <div class="row">
                                                                        <div class="col-xs-12">
                                                                            <div class="col-xs-12" style="background-color: lavender;">
                                                                                <b>Address 1:</b>
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("ADDRESS1") %>'></asp:Label>
                                                                                <br />
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <b>Address 2:</b>
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <asp:Label ID="Label2" runat="server" Text='<%# Eval("ADDRESS2") %>'></asp:Label>
                                                                                <br />
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <b>City:</b>
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <asp:Label ID="Label3" runat="server" Text='<%# Eval("CITY") %>'></asp:Label>
                                                                                <br />
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <b>State:</b>
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <asp:Label ID="Label4" runat="server" Text='<%# Eval("STATE") %>'></asp:Label>
                                                                                <br />
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <b>Zip:</b>
                                                                            </div>
                                                                            <div class="col-xs-12">
                                                                                <asp:Label ID="Label5" runat="server" Text='<%# Eval("ZIP") %>'></asp:Label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </asp:Panel>
                                                        </div>
                                                    </div>                                                    
                                                    <div class="col-xs-12 center" style="background-color: lavender;">
                                                        <br />
                                                        <asp:Button ID="lbtnRemove" runat="server" CssClass="btn btn-primary lbtnRemove" Text="Remove" HeaderStyle-CssClass="visible-xs visible-sm visible-md hidden-lg" CommandName="Remove" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"></asp:Button>
                                                    </div>
                                                </ItemTemplate>

Open in new window

the only important piece from the item template is:
                                                      <div class="hidden-xs col-sm-12 col-sm-4 col-md-4">
                                                                <b>Email:</b>
                                                            </div>
                                                            <div class="hidden-xs col-sm-12 col-md-6">
                                                                <asp:Label ID="lblEMAIL" runat="server" Text='<%# Eval("EMAIL") %>'></asp:Label>
                                                                <br />
                                                            </div>
                                                            <div runat="server" class="col-xs-12 visible-xs" id="hoverDisplay">
                                                                <div class="hidden-sm hidden-md hidden-lg">
                                                                    <a id="hoverUnhide" class="emailLink"><b>Clik here to email:</b></a>
                                                                </div>
                                                                <div id="hidden">
                                                                    <asp:Label ID="lblHiddenEMAIL" runat="server" Text='<%# Eval("EMAIL") %>' Visible="true" Font-Size="X-Small"></asp:Label>
                                                                </div>
                                                            </div>

Open in new window


in the image attached, i tried to capture both when the hover was changing my .css from display: none to display: block, but couldn't
eeHiddenDiv.PNG
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
I see this in your item template...

<div id="hidden">
...
</div>

...and this in your jQuery.

$("#hoverUnhide").mouseover(function () {
         $("#hidden").css("display", "block");
 });

If you are using an id for the hidden element, how are you distinguishing one hidden element from another if the item template is being repeated multiple times?

Are there multiple divs in the view source with id="hidden"? If so, that would explain why only the first element with id="hidden" is working.

In asp.net repeating type controls like GridView, only other asp.net controls should have ID attributes. Html elements like <div>s cannot have ids because the ids will repeat. ids must be unique on a page. Alternately you can add runat="server" to any element to get asp.net to recognize it as a server control. So <div id="hidden" runat="server> may work if you use some inline C# and change your jQuery selector for the #hidden div to $('#<%= ClientID.hidden %>').css...

But never mind all that...

The easy fix in your case would be to remove the id="hoverUnhide" from the link div (for reasons stated above) and use a class="hidden" instead of an id="hidden" for the email div. Then in your jQuery do this (I'm using hover instead of mouseover/mouseout):
$('.emailLink').hover(function(){
		$(this).parent('div').next('div.hidden').show();
	}, function(){
		$(this).parent('div').next('div.hidden').hide();
	});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael SterlingWeb Applications DeveloperAuthor Commented:
Tom

     This is definitely changing the css, (I'm watching it do so in the Chrome browser tools). However, the div still isn't displaying. I changed the css above from: #hidden {display: none;} to .hidden {display: none;}, and tested and got nothing. Then I commented it out all together and still got nothing. But it is changing the css back and forth between display: none and display: block when I hover over the link and off respectively, just not seeing the div. Any suggestions?
0
Tom BeckCommented:
I have next to nothing to work with. Perhaps it's a z-index issue. Maybe the div is behind another element. Perhaps it has no dimension.

Can you provide a relevant piece of the view source code and associated css?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Michael SterlingWeb Applications DeveloperAuthor Commented:
Tom

     Nevermind the previous question. I can see that this idea was doomed from conception. Your advice, solution worked perfectly by the way. The "death knell" of this experiment was my genius (<--i'm using genius very loosely / generously here ;-) ) was that I got the bright idea to name my class (originally my id): "hidden". Well as it turns out, the real geniuses that developed boostrap and one of the variants or supplemental .css files that came with the template I'm using, ALREADY HAVE A CLASS NAMED: ".hidden". I found that out using the browser tools, after implementing your solution and it still not working correctly. I saw that the file in which hidden was found, was not my css file but one that already came with the template. So I changed my class to: ".myhidden" and vee-oh-la (viola)! your solution worked! thanks again!
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thank you sir!
0
Tom BeckCommented:
You're welcome. Glad to help. Thanks for the points.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
One last question. I'm still becoming more and more knowledgeable about jQuery, so can you explain, in simple terms the syntax in your jQuery? you used a comma and then called the hide (ultimately). How does that read, instruction wise? "do this function on hover, AND then do this function, next...."? Just curious.
0
Tom BeckCommented:
$.hover() is shorthand for your two event handlers, mouseover and mouseout.

$.hover() in jQuery can handle both.

Syntax is $( [selector] ).hover( handlerIn, handlerOut );

Where handlerIn and handlerOut are the functions that execute during each event.

You could have combined your two handlers similarly but you would then need to call two jQuery functions,, $.mouseover() and $.mouseout(), separately.

           $("#hoverUnhide").mouseover(function () {
                $("#hidden").css("display", "block");
            }).mouseout(function () {
                $("#hidden").css("display", "none");
            });

By using $.hover() you only call one jQuery function and pass in two parameters.

Along the same lines, $show() and $.hide() are just shorthand for $.css('display', 'block') and $.css('display', 'none') respectively.
1
Michael SterlingWeb Applications DeveloperAuthor Commented:
Tom, again, thank you sir! I May have leveled up a bit in my jQuery knowledge thanks to this.
0
Tom BeckCommented:
You're welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.