Меню-аккордеон. Как сворачивать неактивные пункты?

Question

[dm]

Как в меню-аккордеон делается сворачивание неактивных пунктов меню? Чтобы один открываешь, а прежде открытый закрывался.

HTML

<ul class="accordeon">

	<li><a class="btn-menu" href="#">Верхний пункт</a>
		<ul class="sub-menu">
			<li><a class="sub-menu__item" href="#">Первое меню 1</a></li>
			<li><a class="sub-menu__item" href="#">Первое меню 2</a></li>
			<li><a class="sub-menu__item" href="#">Первое меню 3</a></li>
			<li><a class="sub-menu__item" href="#">Первое меню 4</a></li>
		</ul>
	</li>

	<li><a class="btn-menu" href="#">Средний пункт</a>
		<ul class="sub-menu">
			<li><a class="sub-menu__item" href="#">Второе меню 1</a></li>
			<li><a class="sub-menu__item" href="#">Второе меню 2</a></li>
			<li><a class="sub-menu__item" href="#">Второе меню 3</a></li>
			<li><a class="sub-menu__item" href="#">Второе меню 4</a></li>
		</ul>
	</li>

	<li><a class="btn-menu" href="#">Нижний пункт</a>
		<ul class="sub-menu">
			<li><a class="sub-menu__item" href="#">Третье меню 1</a></li>
			<li><a class="sub-menu__item" href="#">Третье меню 2</a></li>
			<li><a class="sub-menu__item" href="#">Третье меню 3</a></li>
			<li><a class="sub-menu__item" href="#">Третье меню 4</a></li>
		</ul>
	</li>

</ul>

JS

var btnMenu = document.querySelectorAll('.btn-menu'),
    subMenu = document.querySelectorAll('.sub-menu'),
    i, btn, sub;

for (i = 0; i < btnMenu.length; i++) {
    btn = btnMenu[i];
    sub = subMenu[i];

    btn.addEventListener('click', menuOpen(btn, sub));
};

function menuOpen(btn, sub) {
    return function (event) {
        event.preventDefault();
        btn.classList.toggle('btn-menu--active');
        sub.classList.toggle('sub-menu--show');
    };
};

Answer 1

[Пашенька]

Скрываете все и открываете текущий

.sub-menu {
  display: none;
}

jquery

$('.btn-menu').on('click', function() {
    $('.sub-menu').hide();
    $(this).siblings('.sub-menu').show();
});

Comments

[dm]

Логично. Именно о том и вопрос - как это реализовать

[Дмитрий]

dm: да хоть display none ставьте или overflow hidden с указанной высотой. Если надо анимацию, то последний способ и плавное изменение высоты.

[Пашенька]

dm: добавил код

[dm]

like-a-boss: Спасибо, но jq не катит, осваиваю чистый js

[Пашенька]

dm: ок, перепишите логику на нативный. Выбрать пару элементов и давать/снимать классы, всё просто

[corax]

не, так немного некрасиво получится. При клике по уже открытому пункту он закроется и откроется опять. Нужно скрывать все, кроме того, что нужно будет открыть. ну типа перед .hide поставить .not($(this).siblings('.sub-menu')) как то так :)

[Пашенька]

corax: Если это делать с нулевой задержкой, то нет.

Answer 2

[Артем Якушев]

Dreamweaver CC Вставка-jQuery UI-Accordion
Останется только раскрасить его