Как оптимизировать код выпадающего списка?

Question

[Михаил Матвеев]

Добрый вечер. Верстаю небольшой макет. В макете есть выпадающий список (3списка на странице с анимацией раскрытия/закрытия). Скрипт для списка написан, все работает, но сам код получился мягко говоря не очень. Понимаю, что его надо как то оптимизировать, но как пока не придумал.
Подскажите пожалуйста, как можно оптимизировать скрипт, чтобы сделать его более легким и читабельным.
Буду рад Вашим советам.
Код выложил в песочнице https://codepen.io/mihail9108/pen/KKMzYQb

Answer 1

[MagnusDidNotBetray]

Использовать перебор и делегирование.

Comments

[Михаил Матвеев]

Посмотрел скрипт. Выглядит гораздо читабельней, чем мое поделие.
Спасибо большое за помощь.
Пойду разбираться что к чему, сравнивать.

Answer 2

[Андрей Охотников]

Ну во первых нужно убрать дублирование кода, зачем одинаковые функции создавать для каждого элемента, а если их будет 100?

Comments

[Михаил Матвеев]

Понимаю. Дублирование кода не есть хорошо. Вот и хочу убрать его. Может подкинете идейку как. Пока сижу, не допер до чего то толкового.

[scottparker]

Михаил Матвеев, вешайте события на массивы элементов

[Михаил Матвеев]

scottparker, а как их правильно повесить. Пока не совсем понял.

Answer 3

[Ростислав Цехмистро]

Зачем здесь JQuery если такое можно сверстать на чистом css.

Comments

[Михаил Матвеев]

jquery нужен для анимации раскрытия/закрытия списка и иконок.