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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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