Как сделать, чтобы элементы были сначала скрыты, а при нажатии раскрывались и закрывались?

Question

[flyming]

Тут сначала закрываются, а потом раскрываются, нужно наоборот.
https://jsfiddle.net/asxsoy9v/
P.s Огромное спасибо

Answer 1

[MrTimon]

Если брать ваш пример то вам нужно только вначале поставить
$('li:nth-child(n5)').hide();

Ну тоисть вам просто нужно "спрятать" те елементы которые должны быть скрыты, это делает ф-ция .hide() обратная ей .show(). Также эти лишки можна и цсс-ом скрыть . https://jsfiddle.net/asxsoy9v/11/

Comments

[Станислав Ботев]

.hide() и .show() строго не рекомендуется использовать, ибо удалять и добавлять в ДОМ элементы каждый раз не очень хороший паттерн

[MrTimon]

Станислав Ботев, Ну так мы же не убираем его из ДОМ этим, а стиль меняем на display: none. Или нет?!

Answer 2

[Станислав Ботев]

$(el).on('click', function() {
  $(this).toggleClass(className);
});

// Первый вариант с jQ. Где e - это нужный селектор,
// на который нужно повесить событие "клик"
// this - тот же селектор, его можно заменить на другой, нужный
// className - это имя класса, который нужно добавлять
// и удалять по событию "клик"

// Так как подозреваю, что Вы недавно в JS, объясню подробней:
// Большинство листенеров (слушателей, событий) можно повесить
// Именно описанным сверху способом, где мы меняем
// 'click' на 'mousemove', 'resize' и так далее по необходимости
// Первый параметр здесь - название события
// Второй - функция-коллбэк, функция обратного вызова,
// Которая срабатывает при наступлении этого события
// И никогда иначе. 
// Внутри тела функции-коллбэка (то есть внутри фигурных скобок)
// Проводим все необходимые Вам действия.

document.querySelector(el).addEventListener('click', function() {
  el.classList.toggle(className);
});

// Второй вариант на plain JS, делает то же самое
// Для простоты, красоты и читабельности кода можно 
// заранее объявить переменную
// и записать в неё ДОМ-элемент:

var el = document.querySelector(el).

el.addEventListener(....)