How to toggle text in progressive disclosure script?

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

I think I understand what you're trying to do. Please let me know if I'm not and I'll update my answer accordingly.

Here's my very simple markup...

<div class="slide">more...</div>
<div class="view">
<span>This is some stuff!</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

and the script...

$(document).ready(function() {
    $('div.view').hide();
    $('div.slide').toggle(
        function() {
            $(this).siblings('div.view').fadeIn('slow');
            $(this).text("less...");  //change the inner text of the DIV
        }, 
        function() {
            $(this).siblings('div.view').fadeOut('fast');
            $(this).text("more...");  //change the inner text of the DIV
            return false;
        }
    );
});​

This will change the text in the DIV as soon as the div is clicked.

If you want to wait until the hidden DIV is shown to change the text, use this script:

$(document).ready(function() {
    $('div.view').hide();
    $('div.slide').toggle(
        function() {
                $(this).siblings('div.view').fadeIn('slow',
                  function() {
                    $("div.slide").text("less...")  //change the inner text after the animation is complete
                  });
        }, 
        function() {
            $(this).siblings('div.view').fadeOut('fast', 
                   function() {                                                        
                      $("div.slide").text("more...");  //change the inner text after the animation is complete
                   });
            return false;
        }
    );
});​

Answer 2

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.