Как правильно написать jquery скрипт для спойлера?

Question

[massef]

Если "раскрыть все" и закрыть только две потом нажать "свернуть все", блоки не сворачиваются, а наоборот раскрываются.
Не работает потому кол-во элементов четное и в условии сначала срабатывает первое условие, второе уже игнорируется, но как написать иначе, не пойму, подскажите пожалуйста. При нечетном кол-ве элементов все работает.

Пример jsfiddle.net/Lv51q7w6

В целом работать должно так:
1. Можно показать/скрыть каждый отдельный блок = работает
2. Если раскрыть все блоки вручную, у ссылки должен меняться текст на "скрыть все" и аналогично наоборот = работает
3. Если раскрыть все блоки разом, у ссылки должен меняться текст на "скрыть все", далее если закрыть один блок или более, то при клике "свернуть все" должно все скрыться = если закрыть один - работает, если закрыть два и более - не работает
4. Если раскрыть один блок и более, у ссылки текст остается, пока не раскроем все блоки, далее если кликнуть "раскрыть все" в любой момент, не важно сколько блоков открыто, они все должны раскрыться и текст у ссылки меняется. = если раскрыть один или два - работает, если более двух - не работает.

Плагин не предлагать.

Answer 1

[Oleg Pavlov]

Проблема здесь

if (h >= v) {
			$('.option_short').addClass('active').next('.option_detail').stop().slideDown(300);
			$(this).text('Свернуть все');
		} else {
			$('.option_short').removeClass('active').next('.option_detail').stop().slideUp(300);
			$(this).text('Развернуть все');
		};

в условии стоит не строгое неравенство и когда 2 = 2 у вас все блоки раскрываются.

Попробуй вот так

var hideAll = false;
		$('.option_view-all').on('click', function(){
		var h = $('.option_short').next('.option_detail:hidden').length;
			console.log('hidden = ' + h);
		var v = $('.option_short').next('.option_detail:visible').length;
			console.log('visible = ' + v);
			console.log(hideAll);
		if (!hideAll) {
			$('.option_short').addClass('active').next('.option_detail').stop().slideDown(300);
			$(this).text('Свернуть все');
			hideAll = true;
		} else {
			$('.option_short').removeClass('active').next('.option_detail').stop().slideUp(300);
			$(this).text('Развернуть все');
			hideAll = false;
		};
        
		return false;
	});

	$('.option_short').on('click', function(){
		$(this).toggleClass('active').next('.option_detail').stop().slideToggle(300);
		if ($('.option_short').next('.option_detail:hidden').length == 0) {
			$('.option_view-all').text('Свернуть все');
			hideAll = true;
			console.log('hid = ' + $('.option_short').next('.option_detail:hidden').length);
		} else if ($('.option_short').next('.option_detail:visible').length == 1) {
			$('.option_view-all').text('Развернуть все');
			hideAll = false;
			console.log('vis = ' + $('.option_short').next('.option_detail:visible').length);
		};
        
		return false;
	});

Comments

[massef]

Oleg Pavlov Работает, спасибо. Вроде бы понял как работает, при клике на ссылке, условие смотрит на глобальные переменные в нижним скрипте, я правильно понимаю?

Кстати не знаете как можно этот код сократить/оптимизировать? Кроме как поместить повторяющиеся элементы в переменные.

[Oleg Pavlov]

Да, ты все правильно понял.
Я не раздумывал как улучшить код, просто сделал работоспособным.
Если думать в сторону оптимизации - и так уже лишние переменные v и h удалятся, т.к. не нужны. Плюс я не увидел применения класса active, который присваивается. Если на деле он не нужен - можно убрать.
В остальном все неплохо на мой взгляд

Answer 2

[PikcAnt]

А как сделать так, чтобы предыдущий спойлер закрывался при нажатии на новый?