how to toggle anchor tag text in jquery

Question

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");
        });
    });
});

Jai · Answer 1 · 2013-04-06T06:06:17.797

3

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

edited Apr 06 '13 at 06:06

answered Apr 06 '13 at 05:42

Jai

74,255
12
74
103

thanks sir its working with text, but i also want toggle show hide accordingly with text – c.jack Apr 06 '13 at 05:51
sorry sir by mistake i did downvote extremly sorry, i have undo that – c.jack Apr 06 '13 at 05:52
Its find no issues but i just updated the code in the answer. Is this working fine for you? let me know plz. – Jai Apr 06 '13 at 05:53
by doing little changes in your given code accordng to the changes suggested by elrado its now working thanks a lot – c.jack Apr 06 '13 at 06:00
yeah you have to hide it first, via css it can be achieved `#replyuser{display:none;}` – Jai Apr 06 '13 at 06:04
Okay great keep it up! and Good Luck. `:P` – Jai Apr 06 '13 at 06:09
sir one last thing that i also asked with elrado will u please elaborate concatenation function and how it works – c.jack Apr 06 '13 at 06:18
See that is not concatenation its a shorter way of `if(condition){true}else{false}`, This is called ternary operator `(condition) ? true : false;` http://en.wikipedia.org/wiki/%3F: – Jai Apr 06 '13 at 06:23

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

    $(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.

edited May 23 '17 at 10:25

Community

1
1

answered Apr 06 '13 at 05:40

elrado

4,960
1
17
15

but one thing sir will you please tell me that concatenation function working $(this).is(":visible") ? $("#reply").text("close") : $("#reply").text("reply"); – c.jack Apr 06 '13 at 06:05
@elrado better if you explain your answer. – Jai Apr 06 '13 at 06:15

how to toggle anchor tag text in jquery

2 Answers2

Put this in the css:

Use this script then:

Final Fiddle