CSS только показать / скрыть контент с помощью flexbox

Question

Я создаю список часто задаваемых вопросов из 8 вопросов. У меня есть техника флажка CSS, работающая, чтобы показать и скрыть ответ после нажатия на вопрос.

Моя единственная проблема в том, что я использую flexbox для макета сетки, и когда он показывает ответ на вопрос 1, слева , он также расширяет поле вправо. Изображение свернуто: Изображение расширено:

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

Фрагмент кода:

 .open-content {
  position: relative;
 }
 .open-content:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #707070 transparent transparent transparent;
 }
 input[type="checkbox"] {
  display: none!important;
 }
 label {
  display: flex!important;
  margin-bottom: 0px!important;
  font-weight: 400!important;
  cursor: pointer;
 }
 .open-answer:checked ~ .faq-answer {
  display: flex!important;
 }
 .faq-answer {
  display: none;
  padding-top: 15px;
  color: #000000;
  font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
 }

 <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
 </div>

Мне не нужно решение JS, это было бы намного проще. К сожалению, на этой странице мы не можем использовать JS. Надеюсь, кто-нибудь знает, как это исправить.

Answer 1

Вам может потребоваться:

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Свойство CSS align-items устанавливает значение align-self для всех прямых потомков как группа. В Flexbox он управляет выравниванием элементов на поперечной оси. В макете сетки он управляет выравниванием элементов на оси блока в пределах их области сетки.

.open-content {
  position: relative;
 }
 .open-content:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #707070 transparent transparent transparent;
 }
 input[type="checkbox"] {
  display: none!important;
 }
 label {
  display: flex!important;
  margin-bottom: 0px!important;
  font-weight: 400!important;
  cursor: pointer;
 }
 .open-answer:checked ~ .faq-answer {
  display: flex!important;
 }
 .faq-answer {
  display: none;
  padding-top: 15px;
  color: #000000;
  font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
 }

<div style="display: flex; justify-content: space-between;align-items:flex-start; margin-bottom: 20px;">
  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
 </div>

CSS столбец также может быть тем, что вам нужно здесь:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

CSS Многоколоночный макет - это модуль CSS, который добавляет поддержку многостолбцовых макетов. Включена поддержка для определения количества столбцов в макете, а также того, как содержимое должно перетекать из столбца в столбец, размеров зазоров между столбцами и разделительных линий столбцов (известных как правила столбцов), а также их внешнего вида.

.open-content {
  position: relative;
 }
 .open-content:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #707070 transparent transparent transparent;
 }
 input[type="checkbox"] {
  display: none!important;
 }
 label {
  display: flex!important;
  margin-bottom: 0px!important;
  font-weight: 400!important;
  cursor: pointer;
 }
 .open-answer:checked ~ .faq-answer {
  display: flex!important;
 }
 .faq-answer {
  display: none;
  padding-top: 15px;
  color: #000000;
  font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
 }

<div style="column-count:2; margin-bottom: 20px;">
  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>  <div style="flex: 1 1 0px; margin-right: 20px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq1" class="open-answer" type="checkbox">
  <label class="open-content" for="faq1">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat is het Voordeeluitjes.nl user panel?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
  <div style="flex: 1 1 0px; border-radius: 4px; background: #FDF1F8 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000026; padding: 15px 20px;">
  <input id="faq2" class="open-answer" type="checkbox">
  <label class="open-content" for="faq2">
  <span style="color: #000000; font-family: 'Segoe UI', Calibri,FTC-Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 0px;">
  Wat wordt er van mij verwacht?
  </span>
  </label>
  <div class="faq-answer">
  Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec.
  </div>
  </div>
 </div>