развернуть к началу html css

Question

Я строю элемент развернуть / свернуть. При нажатии на ярлык / кнопку «БОЛЬШЕ ИНФОРМАЦИИ» содержимое должно расширяться сверху вниз, а не снизу.

Ниже вы найдете мой код.

И вот два снимка экрана. Первый показывает текущее поведение, второй показывает, как он должен выглядеть при нажатии, с содержимым над надписью / кнопкой ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ.

мой ожидаемый результат:

Было бы здорово, если бы вы могли помочь мне решить эту проблему вопросы. Спасибо.

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #A77B0E;
  background: #FAE042;
  cursor: pointer;
  border-radius: 7px;
  /*   transition: all 0.25s ease-out; */
}

.collapsible-content {
  top: 0px;
  max-height: 0px;
  overflow: hidden;
  transform:
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 100vh;
}

<input id="collapsible" class="toggle" type="checkbox">
<label for="collapsible" class="lbl-toggle">More Info</label>
<div class="collapsible-content">
  <div class="content-inner">
    <p>
      QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven
      Development.
    </p>
  </div>
</div>

Answer 1

Вы можете использовать flexbox и упорядочить элементы в предпочтительном порядке.

Оберните элементы HTML div, присвойте обёртке display: flex; и заставьте отображаться в направлении столбца с flex-direction: column;.

Затем вы просто переупорядочиваете элементы с order: 1 и order: 2.

.collaps-wrapper {
  display: flex;
  flex-direction: column;
}

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #A77B0E;
  background: #FAE042;
  cursor: pointer;
  border-radius: 7px;
  /*   transition: all 0.25s ease-out; */
  order: 2;
}

.collapsible-content {
  top: 0px;
  max-height: 0px;
  overflow: hidden;
  transform:
  order: 1;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 100vh;
}

<div class="collaps-wrapper">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle">More Info</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven
        Development.
      </p>
    </div>
  </div>
</div>

Answer 2

• Поместите содержимое сразу после скрытого флажка
• Используйте этот селектор вместо .toggle:checked + .collapsible-content {

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #A77B0E;
  background: #FAE042;
  cursor: pointer;
  border-radius: 7px;
}

.collapsible-content {
  top: 0px;
  max-height: 0px;
  overflow: hidden;
  transform:
}

.toggle:checked + .collapsible-content {
  max-height: 100vh;
}

.lbl-toggle:before {content: "More "}
.toggle:checked ~ .lbl-toggle:before {content: "Less "}

<input id="collapsible" class="toggle" type="checkbox">
<div class="collapsible-content">
  <div class="content-inner">
    <p>
      QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven
      Development.
    </p>
  </div>
</div>
<label for="collapsible" class="lbl-toggle">Info</label>