Javascript Аккордеон

Question

У меня работает простой баян, кроме одной вещи. Я хотел бы иметь возможность повторно щелкнуть по тому же элементу аккордеона и установить высоту на «0».

В настоящее время элемент открытого аккордеона закрывается, когда я щелкаю по другому элементу аккордеона, который именно то, что я хочу сделать - но я также хочу иметь возможность повторно щелкнуть по открытому элементу аккордеона и закрыть его при нажатии. См. Рабочий пример ниже:

https://codepen.io/celli/pen/BaNLJWb

// set heights to 0
gsap.set('.content', {
  height: 0
});

// click function
$('.accordianItem').click(function() {

  if ($('.accordianItem').hasClass('on')) {
    gsap.to($('.content'), {
      duration: .25,
      height: 0
    });
    $('.accordianItem').removeClass('on');
  }

  gsap.to($(this).children('.content'), {
    duration: .25,
    height: "auto"
  });
  $(this).addClass('on');
});

Какой код можно добавить, чтобы добавить эту дополнительную функцию?

Answer 1

Вы можете сделать это намного проще, чем в настоящее время:

// Create the animation that you need
const tl = gsap.timeline({paused: true});
tl.to('.content', {duration: 0.25, height:0});

// Set the timeline to its end state
tl.progress(1);

// Toggle the timeline's direction
$('.accordianItem').click(function() {
    tl.reversed() ? tl.play() : tl.reverse();
});

Демо

Я очень рекомендую проверить форумы GreenSock . Они очень полезны, и вы можете быстро получить помощь от людей, которые являются экспертами в GSAP и веб-анимации:)

Answer 2

Я изменил ваш код, добавив еще один, если он проверяет, имеет ли элемент, на который нажали, класс «on». Теперь он должен работать так, как вы хотели (скрыть, когда пользователь нажимает на уже открытый заголовок).

// set heights to 0
gsap.set('.content', {height:0});

// click function
$('.accordianItem').click(function() {
    if($(this).hasClass("on")){
       gsap.to($('.content'), {duration:.25, height:0});
       $('.accordianItem').removeClass('on');
    }
    else{
      if ($('.accordianItem').hasClass('on')) {
         gsap.to($('.content'), {duration:.25, height:0});
         $('.accordianItem').removeClass('on');
      }
      gsap.to($(this).children('.content'), {duration:.25, height:"auto"});
      $(this).addClass('on');
    }

});