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

Starr Duskk
Starr Duskk used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
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
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
It worked perfectly! Thanks so much!
Starr DuskkASP.NET VB.NET Developer

Author

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?
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

leakim971Multitechnician
Top Expert 2014

Commented:
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 Developer

Author

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

leakim971Multitechnician
Top Expert 2014

Commented:
    //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 Developer

Author

Commented:
Thank you! But now it doesn't appear to be hiding it. It stays visible after I stop hovering over the percentage label.
leakim971Multitechnician
Top Expert 2014

Commented:
so replace 5000 by 1000 or 2000, reduce the timer
Starr DuskkASP.NET VB.NET Developer

Author

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

leakim971Multitechnician
Top Expert 2014
Commented:
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 Developer

Author

Commented:
Yes! It worked! Thank you so much!! :D

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial