Как сделать, чтоб открывались ровно?

Question

[ART4]

Добрый день друзья, подскажите пожалуйста.
Имеется фильтр (spoiler)
Накидал просто код фильтра самого:

<div class="col-lg-12">
        <div class="filter-test">
            <a href="" class="spoiler-trigger">
                <span class="padding-left">Название свойства</span>
            </a>
            <div class="spoiler-block">
                <ul>
                    <li>Свойство 1</li>
                    <li>Свойство 2</li>
                    <li>Свойство 3</li>
                    <li>Свойство 4</li>
                    <li>Свойство 5</li>
                    <li>Свойство 6</li>
                    <li>Свойство 7</li>
                </ul>
            </div>
        </div>
        <div class="filter-test">
            <a href="" class="spoiler-trigger">
                <span class="padding-left">Название свойства</span>
            </a>
            <div class="spoiler-block">
                <ul>
                    <li>Свойство 1</li>
                    <li>Свойство 2</li>
                    <li>Свойство 3</li>
                    <li>Свойство 4</li>
                    <li>Свойство 5</li>
                    <li>Свойство 6</li>
                    <li>Свойство 7</li>
                </ul>
            </div>
        </div>
    </div>

Сам CSS:

.spoiler-trigger {
    color: #830707;
    text-decoration: none;
    padding-left: 15px;
}

.spoiler-trigger.active {
    background: #830707;
    color: #fff;
    padding: 5px;
}

.spoiler-trigger {
    background: #243541;
    color: #fff;
    padding: 5px;
}

.spoiler-trigger:hover>span {}

.spoiler-block {
    display: none;
}

.spoiler-block ul {
    display: -webkit-box;
}

.spoiler-block ul li {
    list-style-type: none;
    padding: 5px;
    background: #243541;
    color: #fff;
}

.filter-test {
   
    float: left;
}

.padding-left {}

И так же сама открывашка JS:

$(document).on('click', '.spoiler-trigger', function(e) {
            e.preventDefault();
            $(this).toggleClass('active');
            $(this).parent().find('.spoiler-block').first().slideToggle(300);
        })

При таком коде выглядит закрытый:

При открытие открывается криво:

Пытаюсь сделать вот так как тут примерно:
Ссылка


Название свойств убегает и не могут понять почему(

Comments

[Ankhena]

не могут понять почему

Откройте инспектор кода и сравните вашу разметку и того сайта.

Answer 1

[Dauren Syzdykov]

Попробуй через

.spoiler-block{position:absolute;}

И добавь на JS
при клике на другие .spoiler-trigger удалял все старые $(this).toggleClass('active');

Comments

[ART4]

Да работает отлично, спасибо. А как теперь сделать чтоб при нажатие 1 вылазил список, а при 2 свойстве тоже вылазил, но тогда 1 закрывал? А то залазит друг на друга

[Dauren Syzdykov]

.spoiler-block{position:absolute;left:0;}

$(document).on('click', '.spoiler-trigger', function(e) {
            e.preventDefault();
            $('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);
  $('.spoiler-trigger.active').removeClass('active');
            $(this).toggleClass('active');
            $(this).parent().find('.spoiler-block').first().slideToggle(300);  
        })

[ART4]

daur_sdg, Спасибо друг, выручил, сейчас буду эти вопросы изучать!
Типо сравнять чтоб в ряд были и тд

[ART4]

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

[Dauren Syzdykov]

ART4, Все можно через JS контролировать.

этот кусок кода закрывает, именно при клике на другую "Названия свойства"

$('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);

точно так же можно сделать и для внутренных свойств

[ART4]

Dauren Syzdykov, да я понял, что при клике на другую, а ещё если на ту же нажать, как закрыть?

[Dauren Syzdykov]

$(document).on('click', '.spoiler-trigger', function(e) {
            e.preventDefault();
  if ($(this).hasClass('active')){
            $('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);
            $('.spoiler-trigger.active').removeClass('active');
  }
  else{
            $('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);
            $('.spoiler-trigger.active').removeClass('active');
            $(this).addClass('active');
            $(this).parent().find('.spoiler-block').first().slideToggle(300);  }
        })

[ART4]

Dauren Syzdykov, Спасибо, в принцип понял, а не подскажешь какой букварик почитать?

Answer 2

[Алексей]

На том самом сайте, название свойств находятся в отдельном блоке от самих свойств.
Я понимаю что правый клик запрещен, но F12 в Chrome работает на ура.

Comments

[ART4]

Да, но мне надо так чтоб было.(

[Алексей]

ART4, а в чем подвох именно этой верстки, а не с двумя блоками? Можно и как у Вас но будет с позиционированием полная засада.

[ART4]

Алексей, Я фильтр делаю на OkayCMS, там не могу сверстать цепочку из за 2.

Вот она:

{if $features}
    {foreach $features as $key=>$f}
	    {* Название свойства *}
	    <div class="h5 bg-info p-x-1 p-y-05" data-feature="{$f->id}">{$f->name}</div>
        <div class="m-b-2 p-x-05">
	        {* Сброс всех свойств *}
	        <div>
		        <label class="c-input c-checkbox">
			        <input onchange="window.location.href='{furl params=[$f->url=>null, page=>null]}'" type="checkbox"{if !$smarty.get.$key} checked{/if}/>
			        <span class="c-indicator"></span>
			        <span data-language="{$translate_id['features_all']}">{$lang->features_all}</span>
		        </label>
	        </div>
	        {* Значения свойств *}
            {foreach $f->options as $o}
	            <div>
		            <label class="c-input c-checkbox">
			            <input onchange="window.location.href='{furl params=[$f->url=>$o->translit, page=>null]}'" type="checkbox"{if $smarty.get.{$f@key} && in_array($o->translit,$smarty.get.{$f@key})} checked{/if}/>
			            <span class="c-indicator"></span>
			            {$o->value|escape}
		            </label>
	            </div>
            {/foreach}
        </div>
    {/foreach}
{/if}

[Алексей]

ART4, немного не понятно в коде вопроса списки, в коде из CMS div.
Скиньте код из инструментов разработчика, что в итоге то генерирует конструктор.

[ART4]

Алексей, скиньте ссылку. Покажу

[ART4]

Алексей, siteapp.pro вот

[Алексей]

ART4, посмотрел, можно извратиться конечно и через позиционирование разрулить, но лучше логику вывода переписать на табы раскидать.