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();
});
'more otpions'Small typo. Great snipped though.
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-textattribute (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.great tip
if you use html entities like ↑
use instead $(“#more-less-options-button”).html(txt).text();
If using html() (instead of .text() is not an issue then you can have it like this.
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();
});
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
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