Как поменять функции местами в js?

Question

[yuookokk]

Есть такая функция
по умолчанию блоки включены в карусель
при клике tags__option_on
карусель блоки разворачиваются и карусель выключается
а нужно на оборот
что бы изначально развернутые были, tags__option_on
а при клике tags__option_off опять сворачивались и в карусель попадали
что то не могу никак обратно сделать

tagsOn()

    $('.tags__option_off').on('click', function () {
      tagsOn()
      $(this).hide()
      $('.tags__option_on').show()
    })

    $('.tags__option_on').on('click', function () {
      $('.tags__inner').slick('unslick')
      $(this).hide()
      $('.tags__option_off').show()
    })

    function tagsOn() {
      $('.tags__inner').slick({
        arrows: true,
        dots: false,
        variableWidth: true,
        centerMode: true,
        slidesToShow: 8,
        autoplay: true,
        autoplaySpeed: 2000,
        slidesToScroll: 3,
        nextArrow: '<div class="tags__arrow tags__arrow_next">',
        prevArrow: '<div class="tags__arrow tags__arrow_prev">',
        appendArrows: $('.tags__arrows'),
      })
      $('.tags__option_off').hide()
    }

Answer 1

[Сергей Соколов]

Есть 2 возможных состояния: работает слайдер, или статичные теги. Одна функция пусть устанавливает одно или второе:

const sliderOptions = {
  arrows: true,
  dots: false,
  variableWidth: true,
  centerMode: true,
  slidesToShow: 8,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToScroll: 3,
  nextArrow: '<div class="tags__arrow tags__arrow_next">',
  prevArrow: '<div class="tags__arrow tags__arrow_prev">',
  appendArrows: $('.tags__arrows'),
}

const sliderSet = (is_on) => {
  if (is_on) {
    $('.tags__option_on').hide();
    $('.tags__option_off').show();
    $('.tags__inner').slick(sliderOptions);
  } else {
    $('.tags__option_on').show();
    $('.tags__option_off').hide();
    $('.tags__inner').slick('unslick');
  }
}

$('.tags__option_on').on('click', () => sliderSet(true));
$('.tags__option_off').on('click', () => sliderSet(false));

sliderSet(false); // начальное состояние

Answer 2

[Стефан]

Ну скорее всего их изначальное значение вы задаете через css, так что там просто их изначально показываете, а по клику скрываете, желательно полный код прикреплять, css и htlm.