Question

I have a small progressive disclosure (“text expand and collapse”) but the toggle text doesn’t change. Works like this: ( and I didn’t write it)

$(document).ready(function() {
    $('div.view').hide();
    $('div.slide').toggle(
        function() {
            $(this).siblings('div.view').fadeIn('slow');
        }, 
        function() {
            $(this).siblings('div.view').fadeOut('fast');
            return false;
        }
    );
});

I want to change the “more…” text toggle string to “less…” dynamically.

Answer 1

You can do it using .text() like this:

$(document).ready(function() {
    $('div.view').hide();
    $('div.slide').toggle(
        function() {
            $(this).text('less...').siblings('div.view').fadeIn('slow');
        }, 
        function() {
            $(this).text('more...').siblings('div.view').fadeOut('fast');
        }
    );
});

It’s important to stick with this in the toggle, otherwise you’re changing the text for all of the
<div class="slide"> elements, not just the one you’re dealing with.