Имеется спойлер, у которого три таба (их количество будет варьироваться от 3 до 4 табов) расположенных по центру с помощью flex box. Спойлер сделан с помощью
<details> <summary>. Содержимое табов это блок с классом
.spoiler-content. Проблема состоит в том, что я не могу отобразить содержимое табов таким образом, что бы оно расплывалось по всей ширине контейнера и имела резиновую высоту, а так же вела себя как блок, т.е. при раскрытии таба высота содержимого должна двигать другие элементы верстки что находятся под спойлером, а когда таб сворачивался элементы верстки под спойлером снова подтягивались вверх. Я попробовал блок с классом
.spoiler-content позиционировать абсолютно в отношении секции
.spoiler и это решило проблему содержимого с ширенной но не как с высотой, содержимое не двигает элементы всерски что под спойлером, а просто ложится на поверх
вот html код спойлера
<section class="spoiler">
<details>
<summary tabindex="1"><span>Question #1</span></summary>
<div class="spoiler-content"><p>Answer #1 Далеко-далеко за словесными горами в стране, гласных и согласных, живут рыбные тексты. Ее путь это страна, на берегу лучше свою даль, рот она не дороге но. Вопроса она запятых правилами снова единственное, свой парадигматическая речью взгляд если большой вдали рекламных страна, решила то даже маленькая эта взобравшись, послушавшись до. Там, над снова ты единственное страна, буквенных составитель. Своих, одна агентство дороге выйти маленький образ ведущими которой продолжил, грустный, ты раз бросил маленькая домах букв! Снова подпоясал правилами которое даль жаренные, парадигматическая? .</p></div>
</details>
<details>
<summary tabindex="2"><span>Question #2</span></summary>
<div class="spoiler-content"><p>Answer #2 Далеко-далеко за словесными горами в стране, гласных и согласных, живут рыбные тексты. Ее путь это страна, на берегу лучше свою даль, рот она не дороге но. Вопроса она запятых правилами снова единственное, свой парадигматическая речью взгляд если большой вдали рекламных страна, решила то даже маленькая эта взобравшись, послушавшись до. Там, над снова ты единственное страна, буквенных составитель. Своих, одна агентство дороге выйти маленький образ ведущими которой продолжил, грустный, ты раз бросил маленькая домах букв! Снова подпоясал правилами которое даль жаренные, парадигматическая? ..</p></div>
</details>
<details>
<summary tabindex="3"><span>Question #3</span></summary>
<div class="spoiler-content"><p>Answer #3 Далеко-далеко за словесными горами в стране, гласных и согласных, живут рыбные тексты. Ее путь это страна, на берегу лучше свою даль, рот она не дороге но. Вопроса она запятых правилами снова единственное, свой парадигматическая речью взгляд если большой вдали рекламных страна, решила то даже маленькая эта взобравшись, послушавшись до. Там, над снова ты единственное страна, буквенных составитель. Своих, одна агентство дороге выйти маленький образ ведущими которой продолжил, грустный, ты раз бросил маленькая домах букв! Снова подпоясал правилами которое даль жаренные, парадигматическая? .</p></div>
</details>
</section>
ВОТ КОД CSS
/*СПОЙЛЕР*/
.spoiler{
position: relative;
display: flex;
justify-content: center;
}
.spoiler::before {
position: absolute;
content: '';
width: 100%;
height: 1px;
top: 51px;
left: 0;
border-top: 1px solid #000;
z-index: -10;
}
.spoiler details {
display: inline-block;
}
.spoiler details summary span{
margin: 0 2px;
padding: 0 3px;
border: 1px solid #000;
border-bottom: none;
border-radius: 3px 3px 0 0;
background-color: #fff;
}
.spoiler details .spoiler-content {
position: absolute;
top: 52px;
left: 0;
width: 100%;
background-color: #fff;
}
.spoiler details summary::-webkit-details-marker { display: none; };
.spoiler details summary::-moz-list-bullet { list-style-type: none; };
Простой
Средний