Как сделать сворачивающуюся таблицу по типу вертикального аккордеона?

Question

[Сергей]

Есть таблица. В этой таблице в tr показан только первый td. Как сделать чтобы при клике на первый td показывались остальные td, но только в границах одного tr? При клике на первый td из другого tr чтоб отрывался второй ряд.

Знаю что на дивах можно, но нужна именно таблица, там она адаптивная и поэтому в мобильной версии надо так сделать сворачивание.

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/eeku09uo/

Comments

[Сергей]

Спасибо. Но как то запутанно все. Можно сделать чтобы при клике на первый td менялась видимость у остальных td в пределах строки? Т.е. чтобы добавлялся или удалялся класс у последующих td.

[Сергей]

Все)) спасибо. Через класс у td стилями сделал.

[Сергей delphinpro]

>> Т.е. чтобы добавлялся или удалялся класс у последующих td.
Зачем добавлять классы на кучу элементов, когда проще и понятнее управлять ими через класс у родителя?

Answer 2

[Wheelie]

при клике на td, находите родительский tr и открываете в нем нужные td.

Comments

[Сергей]

Как бы это сделать? нашел родительские tr вот так $('.togl_resp').parent() ... а дальше как? и можно ли сделать чтобы к каждой ячейке класс не прописывать?

[Wheelie]

Сергей: Есть вариант, что я туплю. Но мне кажется вам в эту сторону. .find('td:not('.togl_resp')').show();