jQuery Toggle Text?

jquery toggle
mtwallet picture mtwallet · Jan 28, 2010 · Viewed 164k times · Source

How to toggle HTML text of an anchor tag using jQuery? I want an anchor that when clicked the text alternates between Show Background & Show Text as well as fading in & out another div. This was my best guess:

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
    });

    $("#show-background").toggle(function (){
        $(this).text("Show Background")
        .stop();
    }, function(){
        $(this).text("Show Text")
        .stop();
    });
});

Answer

Kyle Butt picture Kyle Butt · Jan 28, 2010 
$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
    });

    var text = $('#show-background').text();
    $('#show-background').text(
        text == "Show Background" ? "Show Text" : "Show Background");
});

Toggle hides or shows elements. You could achieve the same effect using toggle by having 2 links and toggling them when either is clicked.

Related questions

Toggle Checkboxes on/off

I have the following: $(document).ready(function() { $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").attr('checked', true); }); }); I'd like the id="select-all-teammembers" when clicked to toggle between checked and unchecked. Ideas? that aren't dozens of lines of code?

Read More
jQuery toggle CSS?

I want to toggle between CSS so when a user clicks the button (#user_button) it shows the menu (#user_options) and changes the CSS, and when the user clicks it again it goes back to normal. So far this …

Read More
Toggle show/hide on click with jQuery

I got a div element, so when I click on it, another div which is hidden by default is sliding and showing, here is the code for the animation itself: $('#myelement').click(function(){ $('#another-element').show("slide", { direction: "right" }, 1000); }); …

Read More