Question

I’m trying to use slideToggle to show/hide a div, but at the same time change the contents of another div.

So far I have:

        $('#show-advanced').click(function(){
            $("#advanced").slideToggle("fast","linear",function() {
              $('#show-advanced').html('Advanced Options ▴');
            }, function() {
              $('#show-advanced').html('Advanced Options ▾');
            });
        });

It changed the content for the first click, but on the second toggle it doesn’t change it back.

Any help would be greatly appreciated.

EDIT:

Fixed using:

            $("#show-advanced").toggle(function() {
                $('#advanced').slideDown("fast");  
                $('#show-advanced').html('Advanced Options ▴');
            }, function() {
                $('#advanced').slideUp("fast"); 
                $('#show-advanced').html('Advanced Options ▾');
            });

Answer 1

It looks to me that you need a combination of .toggle and .slideToggle:

$('#show-advanced').toggle(function() {
    $("#advanced").slideToggle("fast","linear",function() {
        $('#show-advanced').html('Advanced Options ▴');
    });
), function() {
    $("#advanced").slideToggle("fast","linear",function() {
        $('#show-advanced').html('Advanced Options ▾');
    });
});

.toggle binds both functions to #show-advanced and alternates between them on each click.