Toggle Text with jQuery

Question

I've found a a few articles here on this topic but none seem to answer exactly what I'm looking for.

Here is my current code:

    $(".email-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this)
    .text("Close")
    .toggleClass("active");
});

When I select the word "Email" which has the class "email-slide" the top panel slides down, and the word "Email" turns to white, and the word "Email" turns into the word "Close".

All good so far. But when clicking "Close" though the color and panel go back to normal, the word "Close" does not turn back into the word "Email". Instead of .text("Close") I tried .toggleText("class") but it seems that does not work. Is there something similar I could do it accomplish it by adding the least amount of code possible? Thank you!

UPDATE - I am able to accomplish it by using the following code, but was hoping that would be a more efficient/shorter way of doing it. If not, let me know. Thanks!

$(".email-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active");
});

$(".email-slide").toggle(function (){
    $(this).text("Close")
}, function(){
    $(this).text("Email")
});

Kos · Accepted Answer · 2010-12-01 17:09:52Z

35

You could try:

$(".email-slide").click(function() {
    $("#panel").slideToggle("slow");

    $(this).toggleClass("active");

    if ($(this).text() == "Close")
       $(this).text("Email")
    else
       $(this).text("Close");

});

Or instead of comparing the text() value, you can also test for $(this).hasClass("active").

H.t.h. :)

answered Dec 1, 2010 at 17:09

Kos

72.7k28 gold badges174 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MacAnthony · Accepted Answer · 2010-12-01 17:10:32Z

26

You don't have anything that sets the text back to 'Email'. There isn't a toggle method for content. You will have to do a test and set the value accordingly.

$(".email-slide").click(function(){
    $("#panel").slideToggle("slow");
    var text = $(this).text() == 'Email' ? 'Close' : 'Email';
    $(this)
    .text(text)
    .toggleClass("active");
});

answered Dec 1, 2010 at 17:10

MacAnthony

4,5212 gold badges25 silver badges27 bronze badges

Comments

Adam Ring · Accepted Answer · 2013-02-14 17:39:13Z

9

Here is a shorthand for the above answer:

$(".email-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this)
   .text( ($(this).text() == 'Close' ? 'Email' : 'Close') )
   .toggleClass("active");
});

Adam

answered Feb 14, 2013 at 17:39

Adam Ring

911 silver badge3 bronze badges

1 Comment

Artem P Over a year ago

Even this .text($(this).text() == "Close" ? "Email" : "Close") works http://jsbin.com/mehur/2/

sealthreinhold · Accepted Answer · 2012-12-01 16:26:53Z

3

This is a method to swap text. It is an alternate approach to replacing text.

HTML

<div class="toggleAbout">
    <h2 class="toggleOff">Click</h2>
    <h2 class="toggleOn">Close</h2> <!-- this will be hidden at first -->
</div>

<div class="about">
    <p>blah blah blah</p>
</div>

CSS

.toggleAbout h2.toggleOff { display: block; }
.toggleAbout h2.toggleOn { display: none; } /* this will be hidden at first */
.about { display: none; }

jQuery

$('.toggleAbout h2').click(function()
{
    $('.about').slideToggle('slow', function()
    {
        $('.toggleAbout h2').toggle();
    });
});

answered Dec 1, 2012 at 16:26

sealthreinhold

492 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:16:28Z

0

I think the (this) is screwing it up. You may have to use the class name instead :)

I had the exact same thing the other day, if you see my post: slideToggle jQuery function

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Dec 1, 2010 at 17:06

benhowdle89

37.6k74 gold badges208 silver badges342 bronze badges

Comments

Chandrakiran K S · Accepted Answer · 2010-12-01 17:16:53Z

0

I think JQuery don't have toggleText feature. You have to manually place the "Email" text there on close event.

$(this).text("Email");

answered Dec 1, 2010 at 17:16

Chandrakiran K S

513 bronze badges

Comments

Chandrakiran K S · Accepted Answer · 2010-12-01 17:44:49Z

0

Please try this...

if($('.email-slide').attr('class') == 'inactive')
{
    $('.email-slide').text('Email');
}
else
{
    $('.email-slide').text('Close');
}

$('.email-slide').toggleClass('active');

answered Dec 1, 2010 at 17:44

Chandrakiran K S

513 bronze badges

Comments

daniel__ · Accepted Answer · 2013-12-05 11:04:17Z

0

maybe an easy way would be:

if ($(this).text() == 'Email')
   $(this).text("Close");
else
   $(this).text("Email");

edited Dec 5, 2013 at 11:04

daniel__

11.9k16 gold badges67 silver badges91 bronze badges

answered Feb 14, 2013 at 15:44

Ezequiel

1

Comments

Mark Schultheiss · Accepted Answer · 2017-01-13 17:14:24Z

0

This is a really old question BUT:

$(".email-slide").click(function() {
    $("#panel").slideToggle("slow");
    $(this).text($(this).hasClass('active')?"Email":"C‌lose")).toggleClass(‌'active');
});

answered Jan 13, 2017 at 17:14

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Collectives™ on Stack Overflow

Toggle Text with jQuery

9 Answers 9

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related