Как свернуть все в таблице?

Question

[hollanditkzn]

Есть пример https://jsfiddle.net/rusline/x2bcukw7/4/
Но у меня встал в ступор, как вообще при раскрытие одной строки, если была открыта еще одно строка, то она свернулось. Грубо говоря мне нужно всегда было актуально раскрытие одной строки в нормальном режиме
У меня опыта не хватает, чтобы придумать решение

Answer 1

[s-jet]

Вот так: https://jsfiddle.net/x2bcukw7/6/

Comments

[hollanditkzn]

Да, немного конечно подкорректировать, тем что там минус не уходит

[hollanditkzn]

s-jet да и еще там проблема в том, что при повторном нажатие на данную строку она не сворачивается

[s-jet]

hollanditkzn, как-то так https://jsfiddle.net/x2bcukw7/6/

toggleClass тут не нужен, потому что имеет место быть if - else. Toggle нужен для изменения состояния на противоположное без условий

[hollanditkzn]

s-jet, Да так работает, а можно для ознакомление кода.
зачем нужен closest в данном коде, я прочел что он ищет ближайший подходящий элемент, то есть он в основном должен создать класс и удалить сворачиваемость?
И потом ты

$(this).removeClass('expand').after('<div class="child"><p>blahblah</p><p>Привет мир</p></div>');

Удаляешь класс и добавляешь сворачиваемость. Я правильно же понимаю логику?

[s-jet]

hollanditkzn, т.к. перед добавлением div.child в кликнутый контейнер нам нужно удалить все добавленные ранее div.child в другие контейнеры, мы используем closest (ищет первый родительский элемент подходящий условию) и в нем ищем все добавленные контейнеры и header чтобы им в первоначальное состояние присвоить, но в тоже время чтобы не выходим за рамки нашей таблицы. Вдруг их у нас 5 разных. А потом уже добавляем элемент к кликнутому контейнеру

Answer 2

[Антон]

Сначала, в начале события, убираем раскрытие у всех, потом включаем там, где нажали, т.е. this, в вашем случае это тоггл
3-я строка $('.child').hide();

Comments

[hollanditkzn]

Да есть, такое тогда там не убирается класс и - нет, то есть + развернуть, - свернуть.

Answer 3

[Константин Боровик]

Вроде вот работает, но я советую шапку всё таки в thead перенести:

$('.header').click(function(){
  if($(this).hasClass('expand')){ 	
  $(this).parent('tbody').children('tr').each(function(){$(this).addClass('expand');});
  $(this).toggleClass('expand');
  $(this).parent('tbody').find('.child').remove();
  $(this).after('<div class="child"><p>blahblah</p><p>Привет мир</p></div>'); 
 }else{  
  $(this).toggleClass('expand');
  $(this).parent().find('.child').remove()
 }   
})