список вопросов в две колонки, плюс при открытии ответ

Question

Всем привет, насколько я знаю есть два способа расположить блоки в две колонки. display: gird, и через column: 2. Но при первом способе когда хочешь нажать на вопрос и посмотреть в ответ, блок в соседнем столбце тоже увеличивается, а при втором блоки идут змейкой сверху вниз слева направо и получается, что часть блока уже во втором столбце. Можно ли как то блоки расположить в две колонки, но чтоб при этом увеличивается только блок, на который нажал и все блоки сайта ниже оставались на своем месте.

<ul class="ask_list">
      <li>
        <div class="ask_que">
          <p>I've never earned on social media – is this really for me?</p>
          <img src="images/all/plus2.svg" alt="">
        </div>
        <div class="ask_otvet otvet">
          <p>Yes, our course is designed for beginners! We'll teach you step-by-step how to earn on TikTok,
            Instagram, and YouTube using AI, even if you have no prior experience.
          </p>
        </div>
      </li>

....

1 способ
.ask_list {
   display: grid;
    grid-template-columns: repeat(2, 1fr);}
2 способ
    -css
    .ask_list {
        display: block;
        column-count: 2;}

--- стили для октрытия

.ask_otvet {
    font-size:0
    padding: 0
}

.on .ask_otvet {
    font-size: 16px;
    padding: 18px 0;
    padding-right: 50px;
}

логика

const op1 = document.querySelector('.ask_list')
op1.addEventListener('click', e => {
    const curb = e.target.closest('.ask_que')
    if (!curb) return;
    const onli = op1.querySelector('.on');
    onli?.classList.remove('on')
    const curli = curb.closest('.ask_list li');
    curli.classList.toggle('on', curli !== onli)

})

Answer 1

Можно ли как то блоки расположить в две колонки, но чтоб при этом увеличивается только блок, на который нажал и все блоки сайта ниже оставались на своем месте.

Предложу такой вариант...

const ou = document.querySelector('.ask_list')
ou.addEventListener('click', e => {
  const ol = e.target.closest('li')
  if (!ol) return
  ou.querySelectorAll('.on')?.forEach(o => o !== ol && o.classList.remove('on'))
  ol.classList.toggle('on')
})

.ask_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  color: #fff;
  & > li {
    position: relative;
    list-style-type: none;
    background-color: blue;
    & > .ask_otvet {
      position: absolute;
      display: none;
      background-color: blue;
      z-index: 2;
    }
    &.on > .ask_otvet {
      display: block;
    }
  }
}

<ul class="ask_list">
  <li>
    <div class="ask_que">
      <p>I've never earned on social media – is this really for me?</p>
      <img src="images/all/plus2.svg" alt="">
    </div>
    <div class="ask_otvet otvet">
      <p>Yes, our course is designed for beginners! We'll teach you step-by-step how to earn on TikTok,
        Instagram, and YouTube using AI, even if you have no prior experience.
      </p>
    </div>
  </li>
  <li>
    <div class="ask_que">
      <p>I've never earned on social media – is this really for me?</p>
      <img src="images/all/plus2.svg" alt="">
    </div>
    <div class="ask_otvet otvet">
      <p>Yes, our course is designed for beginners! We'll teach you step-by-step how to earn on TikTok,
        Instagram, and YouTube using AI, even if you have no prior experience.
      </p>
    </div>
  </li>
  <li>
    <div class="ask_que">
      <p>I've never earned on social media – is this really for me?</p>
      <img src="images/all/plus2.svg" alt="">
    </div>
    <div class="ask_otvet otvet">
      <p>Yes, our course is designed for beginners! We'll teach you step-by-step how to earn on TikTok,
        Instagram, and YouTube using AI, even if you have no prior experience.
      </p>
    </div>
  </li>
  <li>
    <div class="ask_que">
      <p>I've never earned on social media – is this really for me?</p>
      <img src="images/all/plus2.svg" alt="">
    </div>
    <div class="ask_otvet otvet">
      <p>Yes, our course is designed for beginners! We'll teach you step-by-step how to earn on TikTok,
        Instagram, and YouTube using AI, even if you have no prior experience.
      </p>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

список вопросов в две колонки, плюс при открытии ответ

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