Treehouse: 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. Mathias Bynens
    Permalink to comment#

    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. adardesign
    Permalink to comment#

    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. adardesign
    Permalink to comment#

    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. Clinton Green
    Permalink to comment#

    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

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```