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

Question

[Константин]

На сайте есть сбоку фильтр товаров, при клике на заголовок "цена" сворачивается блок и цепляется второй, как реализовать, чтобы закрывался именно определенной блок, а не все.

//добавляет или убирает класс для фильтров товаров

$(document).ready(function(){
  $('.name_filter').click(function () {
  $(".content_filter").slideToggle('noshow');
  $('.icon-down-arrow').toggleClass('icon-up-arrow');
  });
 });

Answer 1

[tempick]

Чтобы понять, как это сделать, сначала пробуйте разбираться в своем же коде

$('.name_filter').click(function () {            //при клике по блоку с классом ".name_filter"
        $(".content_filter").slideToggle('noshow');      //сворачиваем (или разворачиваем) блок с ценой
        $('.icon-down-arrow').toggleClass('icon-up-arrow');  //сворачиваем (или разворачиваем) блок с предложениями
 });

Попробуйте немножко подумать, провести параллель и самому ответить на вопросы:
1) Как сделать, чтобы при клике на элементе сворачивался только нужный блок
2) Как сделать, чтобы при клике по любому другому элементу сворачивался любой другой блок.
И тогда окажется, что это ведь и несложно :))

Comments

[Константин]

Ну можно задать разные классы блокам, я вот думал может есть какой то изящный метод, чтобы скрипт срабатывал именно в том блоке, где кликаешь) Чтобы в дальнейшем можно было масштабировать и в cms автоматически добавлялся блок с этим функционалом, cms то без меня не придумает новый класст)

[tempick]

Константин, есть такой метод.

$('.name_filter').click(function() {
    $(this).siblings('.content_filter').slideToggle(..)
});

В this содержится только тот элемент по которому кликнули, а не все элементы с классом name_filter. "siblings()" возвращает соседний элемент с классом "content_filter" и сворачивает его, не затрагивая элементы этим же классом в других блоках

[Константин]

tempick, спасибо! Исчерпывающе!

[Константин]

Константин, только на стрелки этот метод не действует почему то

[tempick]

Константин, ой, я слепой, ошибся.

$('.icon-down-arrow').toggleClass('icon-up-arrow');

это ж за стрелки отвечает. Но в принципе, ничего сложного, просто попробуйте переделать эту строчку так, чтобы она работала не на все .icon-down-arrow а только на тот, по которому кликнули

[Константин]

tempick, вы правильно написали мне по клику на заголовок надо чтобы и контент сворачивался (это уже работает) и стрелка менялась в этом блоке, но тут нюанс:

$(document).ready(function(){
  $('.name_filter').click(function () {
    $(this).siblings('.content_filter').slideToggle('noshow');
    $(this).siblings('.icon-down-arrow').toggleClass('icon-up-arrow');
  });
 });

При таком раскладе контент как надо сворачивается, а стрелка уже не реагирует.

[tempick]

Константин, потому что метод siblings() ищет соседние элементы с таким классом. А класс стрелки у вас добавляется к тому же самому элементу, по которому вы кликаете