Як згорнути текст, поставивши кнопку “читати далі”?
Відповідей: 2
До вирішення даного питання можна підійти кількома способами:
- Використовувати чистий css
- використовувати jquery
- Використовувати два перші варіанти в поєднанні
Відмінність першого способу від другого полягає в тому, що в css плавність розкриття блоку важко згладити. Але в нових версіях css (на сьогоднішній день це css3) з'явилася можливість використання анімації та трансформації. Приклад можете подивитися на animation.css. Там докладні приклади.
Але краще використовувати jquery, хоча для новачків це проблематично буває.
Варіант 1 - Приклад з використанням jquery. Тут після натискання кнопки відкривається текст прихований.
Варіант 2 - Приклад з використанням jquery. Тут після натискання на кнопку відкривається прихований текст, а кнопка зникає при цьому
Варіант 3 - Приклад з використанням css
По суті варіантів реалізації даного прикладу може бути купа. Так в jquery можна використовувати не тільки fideIn і fideOut, але і hide show delay і т.д ..
lt; span id ="ct1" style ="display: block">
текст 1
lt; / span>
lt; span id ="ct2" style ="display: none">
текст 2
lt; / span>
lt; button onClick ="document.getElementById ( 'ct1'). style.display = 'none'; document.getElement
або так
lt; span id ="ct1" style ="display: block">
текст 1
lt; hr>
lt; button onClick ="document.getElementById ( 'ct1'). style.display = 'none'; document.getElement
lt; / span>
lt; span id ="ct2" style ="display: none">
текст 2
lt; hr>
lt; button onClick ="document.getElementById ( 'ct1'). style.display = 'block'; document.getElemen
lt; / span>
Залишити відповідь