Как исправить ошибки аккордеона?

Question

[Саша]

Здравствуйте.
Хочу поделится опытом и увидеть фидбеки, а так же буду рад вашим наработкам в этом же направлении.
Все началось еще несколько лет назад когда мне захотелось написать свой аккордеон с использованием css3 + jQuery.

Почему свой?
Потому что много тех которые встречал не соответствовали запросам, были не идеальны, а конкретно смущало следующее:
- заторможенная анимация на мобильных девайсах (анимация на JS)
- самые элементарные ошибки в виде адаптации плагина к респонсиву
- в конце концов, тянуть целую библиотеку ради одного аккордеона, это совсем не хорошо)
- наверное еще несколько пунктов о которых забыл, а вы можете дополнить из своего личного опыта ;)

С тех пор многократно переписывался код, задержки, без задержек, развилки и многое другое.

Но вот случилось то, что почти идеально, единственный недостаток это два момента:
- на мобильных девайсах данный код работает не совсем корректно, а точнее ошибка в анимации.
- могут быть баги если многократно (с задержкой в доли секунды) нажимать на кнопку

Собственно и хотелось бы коллективным умом разрулить эти моменты, что бы аккордеон все же стал идеальным!)
Пример на фиддл

Comments

[Алексей Уколов]

Для начала, код можно сильно упростить для восприятия:

$('.button').click(function() {
  var parent = $(this).closest('.box');
  var parentActive = 'box--active';
  var holder = parent.find('.holder');
  var frameH = parent.find('.frame').height();
  var height, delay;

  holder.css('height', frameH);

  if (parent.hasClass(parentActive)) {
    height = '0';
    delay = 270; //чуть больше чем значение в transition
  } else {
    height = 'auto';
    delay = 250; //равно значению в transition
  }

  setTimeout(function() {
    holder.css('height', height);
  }, delay);

  parent.toggleClass(parentActive);

  return false
});

[Саша]

Алексей Уколов: спасибо, а как с наработками либо советами по анимации?)

[Иван Соломенников]

Алексей Уколов: Приветствую, ещё можно его упростить на вашем примере сделав шаблон единственной инструкции var.

Answer 1

[iBird Rose]

хз че ты там понаписал. но я такое делаю одной строкой https://jsfiddle.net/iBird/jh6xcbd7/1/

Comments

[Саша]

iBird Rose это не интересно совсем, а в современном вебе даже не правильно)
- анимация на JS
- при многократном нажатии происходит замыкание скрипта

[iBird Rose]

Саша: https://jsfiddle.net/iBird/jh6xcbd7/5/ дальше устал