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.
'more otpions'Small typo. Great snipped though.
Small typo! ‘snipped’
small typo. great commend 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
Thanks a lot. This works like cheese. So Smooth and perfect.
Thank you, man! I’m beginner and spent several hours to find the best solution for my project. I found it here. Thak you so much and greatings from 2021 year :)))