Скрытие/раскрытие списка
 

Доброго времени суток!
На сайте присутствует фильтр.
При нажатии на кнопку "Фильтр" появляется сам фильтр со свернутыми свойствами (скрин "Свойства свернуты"). В данном списке свойство "Цена" всегда развернут - пусть так и останется.

Необходимо, чтобы при нажатии на кнопку "Фильтр" сам фильтр появлялся с развернутым свойством "Производитель". Если развернуть свойство "Цена", должно сворачиваться свойство "Производитель". Если развернуть свойство "Размер", должно сворачиваться свойство "Цвет". Т.е. должно быть развёрнуто только что-то одно из "Производитель", "Размер" и "Цвет".
Сейчас свойство разворачивается/сворачивается при нажатии на само свойство - это стандартный функционал.

В шаблоне фильтра найден код:

<div class="bx_filter_parameters_box active">
                        <span class="bx_filter_container_modef"></span>
                        <div class="bx_filter_parameters_box_title" onclick="smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>
                        <div class="bx_filter_block">
                            <div class="bx_filter_parameters_box_container">
                                <div class="bx_filter_parameters_box_container_block">
                                    <div class="bx_filter_input_container">
                                        <input
                                            class="min-price"
                                            type="text"
                                            name="<?echo $arItem["VALUES"]["MIN"]["CONTROL_NAME"]?>"
                                            id="<?echo $arItem["VALUES"]["MIN"]["CONTROL_ID"]?>"
                                            value="<?echo $arItem["VALUES"]["MIN"]["HTML_VALUE"]?>"
                                            size="5"
                                            onkeyup="smartFilter.keyup(this)"
                                        />
                                    </div>
                                </div>
                                <div class="bx_filter_parameters_box_container_block">
                                    <div class="bx_filter_input_container">
                                        <input
                                            class="max-price"
                                            type="text"
                                            name="<?echo $arItem["VALUES"]["MAX"]["CONTROL_NAME"]?>"
                                            id="<?echo $arItem["VALUES"]["MAX"]["CONTROL_ID"]?>"
                                            value="<?echo $arItem["VALUES"]["MAX"]["HTML_VALUE"]?>"
                                            size="5"
                                            onkeyup="smartFilter.keyup(this)"
                                        />
                                    </div>
                                </div>
                                <div style="clear: both;"></div>
                                    <div class="bx_ui_slider_part p1"><span><?/*=$price1*/?></span></div>
                                    <div class="bx_ui_slider_part p2"><span><?/*=$price2*/?></span></div>
                                    <div class="bx_ui_slider_part p3"><span><?/*=$price3*/?></span></div>
                                    <div class="bx_ui_slider_part p4"><span><?/*=$price4*/?></span></div>
                                    <div class="bx_ui_slider_part p5"><span><?/*=$price5*/?></span></div>
 
                                    <div class="bx_ui_slider_pricebar_VD" style="left: 0;right: 0;" id="colorUnavailableActive_<?/*=$key*/?>"></div>
                                    <div class="bx_ui_slider_pricebar_VN" style="left: 0;right: 0;" id="colorAvailableInactive_<?/*=$key*/?>"></div>
                                    <div class="bx_ui_slider_pricebar_V"  style="left: 0;right: 0;" id="colorAvailableActive_<?/*=$key*/?>"></div>
                                    <div class="bx_ui_slider_range" id="drag_tracker_<?/*=$key*/?>"  style="left: 0%; right: 0%;">
                                        <a class="bx_ui_slider_handle left"  style="left:0;" href="javascript:void(0)" id="left_slider_<?/*=$key*/?>"></a>
                                        <a class="bx_ui_slider_handle right" style="right:0;" href="javascript:void(0)" id="right_slider_<?/*=$key*/?>"></a>
                                    </div>
                                </div>-->
                                <div style="opacity: 0;height: 1px;"></div>
                            </div>
                        </div>
                    </div>

Видимо параметр onclick="smartFilter.hideFilterProps(this)" отвечает за скрытие значений свойства:

JCSmartFilter.prototype.hideFilterProps = function(element)
{
    var easing;
    var obj = element.parentNode;
    var filterBlock = BX.findChild(obj, {className:"bx_filter_block"}, true, false);
 
    if(BX.hasClass(obj, "active"))
    {
        easing = new BX.easing({
            duration : 300,
            start : { opacity: 1,  height: filterBlock.offsetHeight },
            finish : { opacity: 0, height:0 },
            transition : BX.easing.transitions.quart,
            step : function(state){
                filterBlock.style.opacity = state.opacity;
                filterBlock.style.height = state.height + "px";
            },
            complete : function() {
                filterBlock.setAttribute("style", "");
                BX.removeClass(obj, "active");
            }
        });
        easing.animate();
    }
    else
    {
        filterBlock.style.display = "block";
        filterBlock.style.opacity = 0;
        filterBlock.style.height = "auto";
 
        var obj_children_height = filterBlock.offsetHeight;
        filterBlock.style.height = 0;
 
        easing = new BX.easing({
            duration : 300,
            start : { opacity: 0,  height: 0 },
            finish : { opacity: 1, height: obj_children_height },
            transition : BX.easing.transitions.quart,
            step : function(state){
                filterBlock.style.opacity = state.opacity;
                filterBlock.style.height = state.height + "px";
            },
            complete : function() {
            }
        });
        easing.animate();
        BX.addClass(obj, "active");
    }
};

Подскажите, пожалуйста, каким образом возможно реализовать скрытие предыдущего свойства при раскрытии другого? Спасибо.

Я подобной функцией пользовался, если класс объекта одинаковый, а id разные то получится. В функцию передаем id:

function show (index){
        
      $(".bx_filter_block").css({"display":"none"}).eq(index).css({"display":"inline"});

}

Artur_Hopf, спасибо что откликнулись )
В случае если у

<div class="bx_filter_block">

прописать

<div class="bx_filter_block" id="<?=$arItem['ID']?>" onclick="show(id)">

, то при нажатии на чекбокс закрываются все свойства (скрины "1", "2", "3").
Необходимо, чтобы при нажатии на

<div class="bx_filter_parameters_box_title"  onclick="smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>

скрывался предыдущий

<div class="bx_filter_block">

Так?

<div class="bx_filter_parameters_box_title"  onclick="$('.bx_filter_block').hide();smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>

Nexus, спасибо Вам огромное, данный вариант действительно решает задачу с закрытием предыдущего списка :)
При тестировании обнаружено, что открытое свойство не прокручивается к началу списка, т.е. при открытии (к примеру) "Размер", на экране видны значения с середины (скрин "Размер с середины списка"), а не начало списка (скрин "Начало списка").
Подскажите, пожалуйста, возможно ли сделать так, чтобы всегда отображался список сверху?

Можно этот код затолкать в тот же атрибут onclick, но прокручиваться список будет к началу страницы:

$('html,body').scrollTop(0);

Я бы так делать не стал, неправильно костылить на ровном месте.
Лучше разобраться что в коде вообще твориться, чтобы все сделать правильно.

Nexus, подскажите, а возможно сделать так, чтобы прокрутка была именно к свойству (по id например - $arItem["ID"])?

<div class="bx_filter_parameters_box_title"  
id=<?=$arItem["ID"]?> onclick="$('.bx_filter_block').hide();smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>

_marisha, можно, но нужно разбираться что и как работает.

Nexus, замечено, при повторном нажатии на раскрытое свойство оно не сворачивается.
Подскажите, пожалуйста, каким образом возможно подправить возникшую проблему? Спасибо.

- возникает в случае, если в первое условие вместо BX.removeClass(obj, "active"); написать BX.addClass(obj, "active"); А в исключении наоборот вместо BX.addClass(obj, "active") поставить BX.removeClass(obj, "active"). Это был эксперимент :)
Без эксперимента, при последующем открытии свойства предыдущее свойство закрывается, но если попробовать предыдущее свойство открыть снова, то открывается только при втором клике.
Пример:
1) открываем "Производитель"
2) открываем "Цена" -> "Производитель" скрывается
3) открываем "Производитель" -> "Цена" скрывается, но производитель не открывается.
Если верно понимаю, то при открытии одного свойства, у других должен удаляться класс active. Но удаление класса происходит только при втором клике (в данном случае при клике на "Производитель")