Создание текстового перехода, с текстом ниже, перемещающимся, чтобы освободить место для текста выше - PullRequest
Новая
       31

Создание текстового перехода, с текстом ниже, перемещающимся, чтобы освободить место для текста выше

1 голос
/ 18 октября 2019

Я пытаюсь сделать переключаемые описания скользящими или плавными, вместо внезапного появления. Я также хочу сохранить функцию перемещения текста вверх и вниз для размещения текста, который был включен. В идеальном случае это можно сделать с помощью CSS или Javascript, без jQuery и т. Д.

Уже пробовал переход с прозрачностью CSS, но текст не перемещается вверх и вниз для размещения переключаемого текста; 

function view(id) {
  var x = document.getElementsByClassName("descriptions");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].id !== id)
      x[i].style.display = "none";
  }
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}
.descriptions {
  display: none;
}
<div class="toggle" id="a" onclick="view('a1');">Toggle Div 1
  <div id="a1" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="b" onclick="view('a2');">Toggle Div 2
  <div id="a2" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="c" onclick="view('a3');">Toggle Div 3
  <div id="a3" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

1 Ответ

0 голосов
/ 18 октября 2019

Может быть, что-то подобное, используя высоту? 

function view(id) {
  let el = document.getElementById(id);
  if (el.classList.contains('hide')) {
    el.classList.remove('hide');
  } else {
    el.classList.add('hide');
  }
}
.toggle {
  overflow: hidden;
}

.descriptions {
  max-height: 100px;
  transition: all 0.5s ease-in;
}

.hide {
  max-height: 0 !important;
  transition: all 0.2s ease-out;
}
<div class="toggle" id="a" onclick="view('a1');">Toggle Div 1
  <div id="a1" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="b" onclick="view('a2');">Toggle Div 2
  <div id="a2" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>

<div class="toggle" id="c" onclick="view('a3');">Toggle Div 3
  <div id="a3" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>
...