Как изменить надпись на кнопке при нажатии?

Question

[SlimSavernake]

При клике по надписи .dop ("Показать дополнительные параметры поиска"), появляется блок #filter, а надпись .dop при этом изменяется на "Скрыть дополнительные параметры поиска". И после очередного нажатия на .dop и скрытия блока #filter надпись .dop ("Скрыть дополнительные параметры поиска") должна снова замениться на "Показать дополнительные параметры поиска", но этого не происходит, все время остается "Скрыть дополнительные параметры поиска".
Подскажите, пожалуста как исправить?

$('.dop').on('click', function(event) {
        $('#filter').toggle(400);       
        if($('#filter').is(':hidden')) {
            $('.dop').html('Показать дополнительные параметры поиска');
        } 
        if($('#filter').is(':visible')) {
            $('.dop').html('Скрыть дополнительные параметры поиска');
        }
    });

Answer 1

[Денис Беляев]

Видимость элемента изменяется в конце анимации, то есть, в вашем случае, через 400 миллисекунд. Получается, что вы проверяете условие видимости ещё до того, как элемент #filter появится или исчезнет.

Используйте callback функцию по завершению. Вот так код заработает:

$('.dop').on('click', function () {
    var $btn = $(this);
    $('#filter').toggle(400, function () {
        if ($(this).is(':hidden')) {
            $btn.html('Показать дополнительные параметры поиска');
        }
        if ($(this).is(':visible')) {
            $btn.html('Скрыть дополнительные параметры поиска');
        }
    });
});

Не забудьте, что код должен выполняться после загрузки DOM.

Answer 2

[lega]

jsfiddle.net/zgtpjxko