Не получается сделать выпадание текста html

Question

Я хочу реализовать выпадание текста, при нажатии на стрелочку:

.questions-content__title {
  font-family: 'PT Root UI Medium';
  font-size: 18px;
  line-height: 21.6px;
  width: 1200px;
  height: 54px;
  background-color: #f3f3f3;
  margin-bottom: 16px;
  margin-left: 70px;
}

.questions-content__text {
  display: none;
}

.arrow {
  /* display: inline; */
  position: relative;
  top: -25px;
  left: 1050px;
  background-repeat: no-repeat;
  width: 34px;
}

<div class="questions-content__item">
  <div class="questions-content__title">
    <span>Насколько важно уважать культурные корни еды?
      <div class="arrow">
        <img class='arrow-img' src="img/arrowDown.png" alt="" onclick="arrowClick(this)">
      </div>
    </span>
    <div class="questions-content__text">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae fuga rerum quidem commodi
 corrupti, consequuntur distinctio illum. Id repudiandae, ut ad facere odit iure officiis commodi. Soluta sit neque ipsa?</span>
    </div>
  </div>
</div>

<div class="questions-content__item">
  <div class="questions-content__title">
    <span>Безопасно ли облизывать колотушки миксера?
      <div class="arrow">
        <img class='arrow-img' src="img/arrowDown.png" alt="" onclick="arrowClick(this)">
      </div>
    </span>
    <div class="questions-content__text">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae fuga rerum quidem commodi
corrupti, consequuntur distinctio illum. Id repudiandae, ut ad facere odit iure officiis commodi. Soluta sit neque ipsa?</span>
    </div>
  </div>
</div>

Мой текст заходит на следующий блок, а надо, чтобы он заезжал за следующий элемент.

Я пробовал через JS узнавать размер <span> и делать такой же отступ следующего элемента, но ничего не получилось.

Буду благодарен за любую помощь, не обязательно код писать.

Answer 1

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

Предлагаю простое изящное решение:

function spoiler(obj) {
  obj.className == 'spoiler'?
  obj.className='spoiler revealed':
  obj.className='spoiler';
}

section {background: #e5e5e5; padding: 2px 4px; -webkit-user-select: none;}
section>div {background: #f3f3f3; padding: 5px 20px; margin: 4px 0;}

.spoiler {position: relative;}
.spoilerContent {display: block; margin-top: 10px;}
.spoiler span {display: none;}
.spoiler.revealed span {display: block;}

.spoiler i {
  cursor: pointer; display: block; position: absolute;
  top: 2px; right: -50px; width: 8px; height: 8px;
  border-top: 2px solid #f68a46; border-right: 2px solid #f68a46;
  transform: rotate(135deg);
}
.spoiler.revealed i {
  top: 6px;
  transform: rotate(-45deg);
}

<section>
<div>
  Насколько важно уважать культурные корни еды?
  <span class="spoiler" onclick="spoiler(this)">
    <i></i>
    <span class="spoilerContent">
      Офигенно важно!
    </span>
  </span>
</div>
<div>
  Безопасно ли облизывать колотушки миксера?
  <span class="spoiler" onclick="spoiler(this)">
    <i></i>
    <span class="spoilerContent">
      Безусловно!<br>Особенно когда<br>они в работе!
    </span>
  </span>
</div>
</section>

БЛОГ НА HUSL

Не получается сделать выпадание текста html

Ответы (1 шт):