Grow your CSS skills. Land your dream job.

Last updated on:

Toggle Text

Let's say you have a link to show more options which expands a list of options. It's says "more options". It's easy to toggle those options with .toggle() or .slideToggle(), but the text remains the same. To toggle the text too...

$("#more-less-options-button").click(function() {
     var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle();
});

There is a bunch of other ways, as well.

Comments

  1. Pete
    Permalink to comment#

    'more otpions'

    Small typo. Great snipped though.

  2. Of course, it would be more useful to have the text strings in the HTML, one (the default text) as the element’s text content, and the other one as the value of a data-toggle-text attribute (or similar).

    In the above example you may wanna cache $("#extra-options") and $("#more-less-options-button") in a variable to prevent querying the DOM over and over again for the same elements.

  3. moche
    Permalink to comment#

    great tip
    if you use html entities like ↑
    use instead $(“#more-less-options-button”).html(txt).text();

  4. If using html() (instead of .text() is not an issue then you can have it like this.

    $("#more-less-options-button").click(function() {
         $("#more-less-options-button").html(function(i,h){
          return ($("#extra-options").is(':visible') ? 'more options' : 'less options');
    });
         $("#extra-options").slideToggle();
    });
  5. Sorry (no editing comments here), I meant like this:

    $(“#more-less-options-button”).click(function() {
    $(this).html(function(i,h){
    return ($(“#extra-options”).is(‘:visible’) ? ‘more options’ : ‘less options’);
    });
    $(“#extra-options”).slideToggle();
    });

  6. Jbakes
    Permalink to comment#

    So if i wanted to apply this to multiple things I want to toggle, how do I keep them separated? so if i click one element, the rest don’t follow suit

  7. Brilliant, exactly what I was looking for I already had the click function but was battling to add a toggle function to the expand, contract icons. Cheers

  8. Dibakar
    Permalink to comment#

    Thanks a lot. This works like cheese. So Smooth and perfect.

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".