CODEWITHSUNDEEP
jquery
c.jack
c.jack

Reputation: 375

how to toggle anchor tag text in jquery

i want to toggle anchor tag text, i have an anchor tag within div, when user clicks on reply, comment box get open and text should change into close and vice versa but problem is that after text getting change to close, text remain become close nd toggle between show nd hide works clearly...

<a id="reply" href="#">reply</a>
<div id="replyuser" style=" position:absolute;">
    <asp:TextBox ID="txt1" CssClass="txtbox" TextMode="MultiLine" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnreply" Text="send" runat="server" CssClass="btn" />
</div>

jquery is as follows

$(document).ready(function() {
    $("#replyuser").hide();

    $("#reply").click(function() {
        $("#replyuser").toggle(function() {
            $("#reply").text("close");
        });
    });
});

Upvotes: 0

Views: 5823

Answers (2)

elrado
elrado

Reputation: 5272

    $(document).ready(function() {
                $("#replyuser").hide();

                $("#reply").click(function() {

                    $("#replyuser").toggle(function(e) {
                           $(this).is(":visible") ? $("#reply").text("close") : $("#reply").text("reply");                         
                    });

                });
            });

$(this) is reference to $("#replyuser") control SO link and :visible is selector for visible controls (surprised a :)). So logicly .is checks if $("#replyuser") is visible.

Upvotes: 0

Jai
Jai

Reputation: 74738

Try replacing the text on click:

You are in context of a button then try refering it with $(this) when it gets a click event then toggle the #reply div and check for the text. If this has the text reply change it to close.

Put this in the css:

#replyuser {
    display:none;
}

Use this script then:

$("#reply").click(function() {
   $("#replyuser").toggle();
   ($(this).text() === "reply") ? $(this).text("close") : $(this).text("reply");
});

Final Fiddle

Upvotes: 3

Related Questions