CODEWITHSUNDEEP
jquery
TechRemarker
TechRemarker

Reputation: 2938

Toggle Text with jQuery

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

Upvotes: 17

Views: 57759

Answers (9)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

This is a really old question BUT:

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

Upvotes: 0

Ezequiel
Ezequiel

Reputation: 1

maybe an easy way would be:

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

Upvotes: 0

Adam Ring
Adam Ring

Reputation: 91

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

Upvotes: 9

sealthreinhold
sealthreinhold

Reputation: 49

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

Upvotes: 3

Chandrakiran K S
Chandrakiran K S

Reputation: 51

Please try this... 

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

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

Upvotes: 0

Chandrakiran K S
Chandrakiran K S

Reputation: 51

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

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

Upvotes: 0

MacAnthony
MacAnthony

Reputation: 4521

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

Upvotes: 26

Kos
Kos

Reputation: 72241

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. :)

Upvotes: 34

benhowdle89
benhowdle89

Reputation: 37454

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

Upvotes: 0

Related Questions