Toggle boot button text when button is clicked?

Question

I want to switch text to a button every time it is clicked, for example. from "Show more ..." to "Show less ...".

I have a button that is used to expand or smooth the neighboring block (see the Collapse section in the Bootstrap docs, click the "Link with href" link example to see what I mean).

The HTML for such a Bootstrap button is as follows:

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

When the linked block is collapsed, I want the button text to be, for example, "Show more ...", and when it expands, I want it to be, for example. "Show less ...".

I have seen solutions that separate button text from jQuery, Javascript, or CSS, but this makes HTML difficult to read (the button text is somewhere else entirely for the button) and also makes localization difficult.

Answer 1

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

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

You can have as many or more <span> tags as you want, and you can order them as you wish, all that matters is whether they are marked with the hidden class.

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 the boiler plate bit - jQuery and Bootstrap have somewhat conflicting ideas about hidden ones. It just flips everything that you mark as hidden using the Bootstrap hidden class to hide jQuery, which makes it easier to use the jQuery visibility function after that.

The next bit is important material - it sets a handler for all elements marked with our new toggle-text class - this handler switches the visibility of the child <span> elements of this element when clicked.

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

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

This is the first time I wrote a question with the intention of answering it. I am interested to know if anyone has a better answer.

For me, this solution looks super simple and has the big plus of saving button text along with HTML for the button, without an extra button specific to CSS or Javascript / jQuery.

---

jQuery is good in that it does not need to be configured for each button depending on the text you want to display. And you have a lot of flexibility when mixing the text you are doing, and don't want to switch, for example. following equivalents:

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

Answer 2

You can use simple jQuery to achieve 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...'); } }); 

Answer 3

Instead of dealing with redundant tags or putting your alternate button text in your JavaScript directly, I personally prefer to use HTML5 user data attributes . Thus, you can easily rotate the original and alternative text for each click, but keep it relative to your switching 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--> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <!--toggle 1--> <button class="btn btn-link" data-toggle="collapse" data-target=".details-1" data-text-alt="- hide details">+ show details</button> <div class="details-1 collapse"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <hr> <!--toggle 2--> <button class="btn btn-link" data-toggle="collapse" data-target=".details-2" data-text-alt="- hide details">+ show details</button> <div class="details-2 collapse"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <!--scripts--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 4

Thanks for your suggestions. You pointed me in the right direction, but I have changed a bit. My solution uses a bit of CSS to say what a “hidden” class means, and then jQuery switches that class to all SPAN elements:

HTML (similar to yours):

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

CSS

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

Update: you don't need this css bit if you use bootstrap as George Hawkins pointed out

JQuery

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

I'm not talking about it better, but to me it looks a little cleaner. In addition, you can extend this method without hiding the text, but changing its color back and forth, etc.

Answer 5

I tried a couple of these approaches before putting them together. This is the simplest and most understandable approach I've seen so far:

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

The main purpose of this link is to switch the visibility of the filters div # ... but it takes advantage of several selectors in data_target to also switch the visibility of two versions of the link text. Just make sure you have one text like “.collapse.in” and the other “.collapse.out”.

Besides simplicity, I like that it is very reliable. Since the tag is never hidden or manipulated, you will never lose the view / hide relationship during debugging.