How to use Jquery to hide and show objects using specific ids

I have tiles that I am loading in a repeater using VB.net.
TileExample.PNG
For each tile, when they hover over the percentage I want to display a tag that is a button.
TileExampleHover.PNG
I want to use Jquery to do this, but I also want to make sure that it's displaying the 'View More' tag that is tied to the corresponding percentage label. Is this possible?

This is my code. I simplified the table so it wouldn't have all the fields. It just has the fields that are concerned with my question.
<table id="TableTraining" class="display scrollTable cards" style="width: 100%; text-align: left !important; font-size: 14px;">
            <thead>
                <tr class="colorFontRTOBlue" style="font-size: 12px;">
                    <th class="">Percentage
                    </th>
                </tr>
            </thead>
            <tbody id="dataContainer" clientidmode="Static" runat="server">
                <asp:Repeater ID="repRepeater" runat="server">
                    <ItemTemplate>
                        <tr id="row" class="<%# Eval("divRowClass").ToString()%>" style="cursor: pointer;">
                            <td class="stylRow5Perc stylTileLabel stylTileActive stylActivePercent">
                                <asp:Label ID="lblActiveStatus" Text='<%# Eval("ActiveStatus").ToString()%>' runat="server"></asp:Label>
                                <asp:Label ID="lblPercentageTile" Text='<%# Eval("Percentage").ToString()%>' mouseover="ShowViewMoreTag()" CssClass="showTile stylPercentageContent stylPercentageHover" runat="server"></asp:Label>
                                <asp:LinkButton ID="btnViewMore" Text='<%# Eval("dcViewMore").ToString()%>' CssClass="stylViewMoreBtn" OnClientClick="ShowViewScorePanel()" runat="server"></asp:LinkButton>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </tbody>
        </table>

Open in new window

This is the jquery that I tried, but it's not working and I don't think it will because I need it to be id specific.
    //Hide and Show View More Tag

    $("#lblPercentageTile").mouseenter(function() {
            document.getElementById("btnViewMore").style.display = "";
    });
    $("#lblPercentageTile").mouseleave(function () {
        document.getElementById("btnViewMore").style.display = "none";
    });

Open in new window

LVL 2
Starr DuskkASP.NET VB.NET 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.

leakim971PluritechnicianCommented:
References :
https://api.jquery.com/next/
https://api.jquery.com/hover/
https://api.jquery.com/attribute-contains-selector/

    //Hide and Show View More Tag
    $("[id*='lblPercentageTile']").hover(function() {
            $(this).next("[id*=btnViewMore]").show();
    },function () {
            $(this).next("[id*=btnViewMore]").hide();
    });

Open in new window


if that doesn't work, please open your page, right click on it and choose view source.
post content of the source here after removing sensitive information if needed

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
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
It worked perfectly! Thanks so much!
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
@leakim971

I just realized after implementing the code that when I go to click the button I unhid, since I am not hovering over the percentage anymore it gets hidden again. So I can't click the button. What code can I add so that it stays open long enough to click? Or just stays open when it's hovered over as well?
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

leakim971PluritechnicianCommented:
the best would to have something LIKE :

<asp:Label ID="lblActiveStatus" Text='<%# Eval("ActiveStatus").ToString()%>' runat="server"></asp:Label>
<div class="tile">
                                <asp:Label ID="lblPercentageTile" Text='<%# Eval("Percentage").ToString()%>' mouseover="ShowViewMoreTag()" CssClass="showTile stylPercentageContent stylPercentageHover" runat="server"></asp:Label>
                                <asp:LinkButton ID="btnViewMore" Text='<%# Eval("dcViewMore").ToString()%>' CssClass="stylViewMoreBtn" OnClientClick="ShowViewScorePanel()" runat="server"></asp:LinkButton>
</div>

Open in new window


and use :

    //Hide and Show View More Tag
    $(".tile").hover(function() {
            $("[id*=btnViewMore]", this).show();
    },function () {
            $("[id*=btnViewMore]", this).hide();
    });

Open in new window

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Thank you, but I need it to show when hovered over the percentage only.

I tried setting a timeout of the hide(); but I am having trouble with the syntax.
I know it's not right, but I am not sure what bracket I am missing.

$("[id*='lblPercentageTile']").hover(function () {
        $(this).next("[id*=btnViewMore]").show();
    }, setTimeout(function () {
        $(this).next("[id*=btnViewMore]").hide(); }, 5000);
    );

Open in new window

leakim971PluritechnicianCommented:
    //Hide and Show View More Tag
    $("[id*='lblPercentageTile']").hover(function() {
            $(this).next("[id*=btnViewMore]").show();
    },function () {
            setTimeout(function() { $(this).next("[id*=btnViewMore]").hide(); }, 5000); // you was close
    });

Open in new window

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Thank you! But now it doesn't appear to be hiding it. It stays visible after I stop hovering over the percentage label.
leakim971PluritechnicianCommented:
so replace 5000 by 1000 or 2000, reduce the timer
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I only want it to show for about 5 seconds. I reduced timer to '1000' and it's still showing even now.

    //Hide and Show View More Tag
    $("[id*='lblPercentageTile']").hover(function() {
        $(this).next("[id*=btnViewMore]").show();
    },function () {
        setTimeout(function() { $(this).next("[id*=btnViewMore]").hide(); }, 1000); // you was close
    });

Open in new window

leakim971PluritechnicianCommented:
Go for this :
    //Hide and Show View More Tag
    $("[id*='lblPercentageTile']").hover(function() {
            $(this).next("[id*=btnViewMore]").show();
    },function () {
           var that = $(this).next("[id*=btnViewMore]");
            setTimeout(function() { that.hide(); }, 5000);
    });

Open in new window

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Yes! It worked! Thank you so much!! :D
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
Visual Basic.NET

From novice to tech pro — start learning today.