Toggle Bootstrap Button Text On Button Click?

September 27, 2023 Post a Comment

I want to toggle the text on a button each time it's clicked, e.g. from 'Show more...' to 'Show less...'. I have a button that's used to expand or collapse a nearby block (see the

Solution 1:

I tried a couple of these approaches before cobbling this one together. It is the simplest, most readable approach I've seen so far:

<ahref="#"data-toggle='collapse'data-target="#filters,#view_filters,#hide_filters"><spanid='view_filters'class='collapse in'>View Filters</span><spanid='hide_filters'class='collapse out'>Hide Filters</span></a><divid="filters"class="collapse out">
      Now you see me!
    </div>

The main purpose of this link is to toggle visibility of div#filters...but it takes advantage of multiple selectors in data_target to also toggle the visibility of the two versions of the link text. Just make sure you've got one text as ".collapse .in" and the other as ".collapse .out".

Beyond its simplicity, I like that this is very reliable. Because the tag is never hidden or manipulated, you'll never accidentally lose the view/hide link while debugging.

Solution 2:

Using jQuery the answer is simple. Just mark such buttons with a new class called toggle-text and use <span> and <span class="hidden"> to mark the text you want to toggle back and forward between:

<aclass="btn btn-primary toggle-text"data-toggle="collapse"href="#collapseExample">
    See <span>more</span><spanclass="hidden">less</span>...
</a>

You can have as many or few <span> tags as you want and can order them as you want, all that's important is whether or not they're marked with class hidden.

Now in jQuery you can do:

$('.hidden').removeClass('hidden').hide();
$('.toggle-text').click(function() {
    $(this).find('span').each(function() { $(this).toggle(); });
});

The first line is a bit of boiler plate - jQuery and Bootstrap have somewhat conflicting ideas about hidden. This just flips everything you've marked as hidden using the Bootstrap class hidden to being hidden by jQuery which makes it easier to use the jQuery visibility functions afterwards.

The next bit is the important stuff - it installs a handler on all elements marked with our new class toggle-text - this handler toggles the visibility of the <span> children of the given element when it's clicked.

See everything in action with this jFiddle - http://jsfiddle.net/w3y421m9/1/

Note: the name toggle-text is completely arbitrary and is just used for marking buttons for which we want this toggle behavior.

This is the first time I've written a question with the intention of answering it. I'm interested to see if someone has a better answer.

To me this solution looks super simple and has the big plus of keeping the button text together with the HTML for the button, without additional button specific CSS or Javascript/jQuery code.

The jQuery is nice in that it doesn't have to be customized on a per-button basis depending on the text you want to display. And you've got a lot of flexibility with mixing text that you do and don't want to toggle, e.g. the following are all equivalent:

<span>Show more...</span><spanclass=hidden">Show less...</span>
Show <span>more</span><spanclass=hidden">less</span>...
Show <spanclass=hidden">less</span><span>more</span>...

Solution 3:

Rather than dealing with excess tags or placing your alternate button text within your JavaScript directly, I personally prefer leveraging HTML5 custom data attributes. This way you can easily rotate between the original and alternate button text on each click, but keep it relative to your toggle element.

jQuery(function($){
  $('.btn[data-toggle="collapse"]').on('click', function(){
    $(this)
    .data('text-original', $(this).text())
    .text($(this).data('text-alt') )
    .data('text-alt', $(this).data('text-original'));
  });
});

<!--styles--><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /><!--toggle 1--><buttonclass="btn btn-link"data-toggle="collapse"data-target=".details-1"data-text-alt="- hide details">+ show details</button><divclass="details-1 collapse"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div><hr><!--toggle 2--><buttonclass="btn btn-link"data-toggle="collapse"data-target=".details-2"data-text-alt="- hide details">+ show details</button><divclass="details-2 collapse"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div><!--scripts--><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Solution 4:

You can use simple jQuery to achive this.

https://jsfiddle.net/YameenYasin/5j0ehez1/40/

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
    See more...
</a>

$('a').click(function(){        
    if($(this).text().trim() == 'See more...' ){
        $(this).text('See Less...');
    }else{
         $(this).text('See more...');
    }
});

Solution 5:

Thanks for your suggestions. You pointed me in the right direction but I ended up doing it slightly different. My solution uses a bit of CSS to tell what the "hidden" class means and then jQuery toggles this class on all SPAN elements:

HTML (similar to yours):

<aclass="toggle-link"href="..."><span>Show more...</span><spanclass="hidden">Show less...</span></a>

CSS:

.toggle-link.hidden {
  display: none;
}

Update: You don't need this bit of css if you're using bootstrap, as pointed out by George Hawkins

jQuery:

jQuery(".toggle-link").click(function() {
    jQuery(this).find("span").toggleClass("hidden");
    /* Add more logic here */
});

I'm not saying it's better per se but to me it looks a bit cleaner. Also, you could expand on this method by not hiding a text but changing it's color back and forth, etcetera.

Html5 Library