1

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>
mVChr
  • 49,587
  • 11
  • 107
  • 104
verlager
  • 794
  • 5
  • 25
  • 43
  • This is really confusing without knowing what elements are on your page. Specifically, what's the class/id of the button in your second script? – typeof Mar 26 '11 at 01:41
  • (show - hide) – verlager Mar 26 '11 at 01:46
  • /* Progressive Disclosure */ .pusher{background:#3B6670; color:#F0E3C0; cursor:pointer; display:table; padding:3px 8px; font-weight:900; font-size:16px; font-weight: bold; display:inline; float:right; clear:both; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin-top:0; margin-bottom:10px}; .pusher:hover{background:#0D1F30} – verlager Mar 26 '11 at 01:47

1 Answers1

0

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);
    });
});
typeof
  • 5,812
  • 2
  • 15
  • 19
  • dw. The text changes to 'hide' and stays 'hide' even when the text is retracted (or expanded). To see this, go to: http://communitychessclub.com/gentle_wiki/ and click on any '(show - hide)' button. I will edit the initial show-hide text if a solution is found. – verlager Mar 26 '11 at 02:03
  • Ok, the hiding effect wasn't happening fast enough. Give it a try now (edited above). – typeof Mar 26 '11 at 02:17
  • I appreciate your help. Would it be possible to add the same text toggle for the other functions? I'd like to have it work for slideToggle toggleSlow fadeInOut. I tried to manually fix it, altering a few vars but I think a more sophisticated modular solution would ideal; that is ... can we get the text toggle to work with all three text effects? – verlager Mar 26 '11 at 03:06
  • dw. I changed slideToggle from an ID to a class so I could re-use it and the text does not toggle. And it looks jerky. Is this impossible to fix? – verlager Mar 27 '11 at 05:02