Search code examples
jquerydisclosureprogressive

How do I add text to jquery script button?


I have this old jquery script for progressive disclosure: (notice the $(this).text('more...') code changes the button text.

<!--for more/less progressive disclosure-->
<script >
$(document).ready(function () {
    $('div.view').hide();
    $('div.slide').toggle(function () {
        this.style.background = '#7D4F4E';
        $(this).text('less...').siblings('div.view').fadeIn('fast');
    }, function () {
        this.style.background = '#B0B07F';
        $(this).text('more...').siblings('div.view').fadeOut('fast');
    });
});
</script> 

It works OK, but I'd to use the one below and I want this jquery script to have the same text change (for the button). How do I apply the text change in the above code to the new script in the bottom?

<!--a real good progressive disclosure-->
<script type="text/javascript">
$(document).ready(function () {
    $('.mover').hide();
    $('#slideToggle').click(function () {
        $(this).siblings('.mover').slideToggle();
    });
    $('.toggleSlow').click(function () {
        $(this).siblings('.mover').toggle('normal');
    });
    $('#fadeInOut').toggle(function () {
        $(this).siblings('.mover').fadeIn('normal');
    }, function () {
        $(this).siblings('.mover').fadeOut('normal');
    });
    $('#animate').click(function () {
        $(this).siblings('.mover').slideDown(5500).fadeOut(7300);
    });
});
</script> 

Solution

  • I would give this a shot:

    Edited to include callback on toggle() function:

    $(document).ready(function() {
        $('.mover').hide();
        $('#slideToggle').click(function() {
            $(this).siblings('.mover').slideToggle();
        });
        $('.toggleSlow').click(function() {
            var $mover = $(this).siblings('.mover');
            var toggler = this;
            var text;
            $mover.toggle('normal', function() {
                text = ($mover.is(':visible')) ? 'Hide' : 'Show';
                $(toggler).text(text);
            });
    
        });
        $('#fadeInOut').toggle(function() {
            $(this).siblings('.mover').fadeIn('normal');
        },
        function()
        {
            $(this).siblings('.mover').fadeOut('normal');
        });
        $('#animate').click(function() {
            $(this).siblings('.mover').slideDown(5500).fadeOut(7300);
        });
    });