1

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

.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> и делать такой же отступ следующего элемента, но ничего не получилось.

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

1
  • Переместите текст из заголовка в итем. Заголовку жёстко задана высота, вот он и не увеличивается при появлении текста.
    – user347472
    20 мар 2021 в 21:29

1 ответ 1

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>

2
  • салам - а что не работает по клику на серую область ? 21 мар 2021 в 0:55
  • @Sevastopol' спасибо за помощь, взял этот прием на вооружение! 21 мар 2021 в 7:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.