Плавное разворачивание блока

214

31 декабря 2018, 19:10

Вроде бы типичная ситуация, но не могу понять, как сделать на jQuery плавно разворачивающиеся текст? То бишь, мне нужен аналог slideToggle для блока, только часть текста видна, а часть закрыта overflow:hidden. Мне необходимо, чтобы остальное содержимое при клике плавно разворачивалось, затем при клике сворачиловалось. НАсколько знаю транзишн можно ставить на цифровое значение, а текст будет динамическим, то есть текст нужно ставить в auto

Answer 1

можно поставить для блока с текстом max-height, например 40px, overflow: hidden, transition: max-height 300ms linear, а для раскрытого состояния установить max-height, например в 300vh

Answer 2

Вот как вариант из двух блоков, один контролит второй:

h3 { 
  cursor: pointer 
}

<h3 onclick="$('#first').slideToggle()">Block one</h3> 
<p id="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consectetur ratione accusamus sequi velit. Architecto nostrum adipisci incidunt accusamus laborum.</p> 
 
<h3 onclick="$('#second').slideToggle()">Block two</h3> 
<p id="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consectetur ratione accusamus sequi velit. Architecto nostrum adipisci incidunt accusamus laborum.</p> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Вот еще через max-height, но не красиво закрывается. Есть задержка, можно задать хоть 2000px но будет дольше задержка.

$('h3').on('click', function () { 
  const obj = $(this).parent() 
  obj.toggleClass('active') 
})

h3 { 
  cursor: pointer; 
  height: 50px; 
  display: block; 
} 
 
div { 
  max-height: 50px; 
  overflow: hidden; 
  display: block; 
  transition: max-height 1s ease-out; 
} 
 
div.active { 
  transition: max-height 1s ease-in; 
  max-height: 500px; 
}

<div> 
  <h3>Block one</h3> 
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consectetur ratione accusamus sequi velit. Architecto nostrum adipisci incidunt accusamus laborum. 
</div> 
 
<div> 
  <h3>Block two</h3> 
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consectetur ratione accusamus sequi velit. Architecto nostrum adipisci incidunt accusamus laborum. 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>