Почему неправильно работает fadeToggle при клике?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/XWWrorN

При клике кнопка должна быть изменена на Скрыть, однако у меня почему-то пишет все равно Показать

Comments

[Ярослав Иванов]

Сделай внешнюю переменную триггер и её проверяй

var status = false

[Genri_Rus]

Ярослав Иванов, а можно примерно пример как нужно ?

var status = false

Проверку на что ? Hidden ?

[Ярослав Иванов]

Genri_Rus, кликаешь и проверяешь переменную. Если труе то пишешь один текст если фолсе то другой и меняешь переменную при клике

[Genri_Rus]

Ярослав Иванов, а разве не будет дубляжа в коде ?

[Mr_Sergo]

может так https://codepen.io/Mr_Sergo/pen/ZEEELgb
или так https://codepen.io/Mr_Sergo/pen/KKKKWVK

[Genri_Rus]

Mr_Sergo, спасибо

А вот проверка на hidden в моем примере не поможет ?

Допустим человек кликнул и произошла проверка - скрыт table-mobile или нет ?

[Mr_Sergo]

А вот проверка на hidden в моем примере не поможет ?

$('button').on('click', function() {
    let elm = $(this).parent().find('.toggle'), timeout, time;
    clearTimeout(timeout);

    if (elm.is(':visible')) {
        elm.stop().fadeOut(time);
        timeout = setTimeout(() => this.firstChild.textContent = 'Показать все', time);
    }
    else {
        elm.stop().fadeIn(time);
        timeout = setTimeout(() => this.firstChild.textContent = 'Скрыть', time);
    }
});

[Genri_Rus]

Mr_Sergo, спасибо большое, а с fadeTogggle так не прокатит ?

(tableDrop).fadeToggle(function() {
    showV = $(this).is(':visible');
    
    if (showV === true) {
        $('i').animate({  rotDeg: 180 }, {
                    step: function(n) {
                        $('i').css({"transform" : 'rotate(' + n + 'deg', "vertical-align" : "sub"}); 
                    }, duration: 150, 
                }, "linear");
    } else {
      $('button').html('Показать<i class="fas fa-sort-down"></i>');
      $('i').animate({  rotDeg: 0 }, {
        step: function(n) {
          $('i').css({"transform" : 'rotate('+ n + 'deg', "vertical-align" : "top"}); 
        }, duration: 150, 
      }, "linear");
    }
  });

[Mr_Sergo]

Genri_Rus, с fadeTogggle

$('button').on('click', function() {

    let elm = $('.toggle').parent().find('.toggle');

    elm.fadeToggle(1000, 'linear', function(){

        if (elm.is(':visible')) {
            $('button').html('Скрыть<i class="fas fa-sort-down"></i>');

            $('i').animate({  rotDeg: 180 }, {
                step: function(n) {
                    $('i').css({"transform" : 'rotate(' + n + 'deg', "vertical-align" : "sub"}); 
                }, duration: 150, 
            }, "linear");
        }

        else {
            $('button').html('Показать<i class="fas fa-sort-down"></i>');

            $('i').animate({  rotDeg: 0 }, {
                step: function(n) {
                    $('i').css({"transform" : 'rotate('+ n + 'deg', "vertical-align" : "top"}); 
                }, duration: 150, 
            }, "linear");
        }
    });
});

вместо 1000мс поставите сколько вам нужно

[Genri_Rus]

Mr_Sergo, супер, спасибо, то что нужно !

А вот как у fadeToggle переопределить поведение ?

display: table-cell - по-умолчанию, а вот если мне нужно на "display": "flex" ?

https://codepen.io/Genri_Rus/pen/JjjjNRw