Як згорнути текст, поставивши кнопку “читати далі”?



+3 +/-
Профіль користувача Pub Запитав: Pub  (рейтинг 21161) Категорія: Інтернет

Відповідей: 2

1 +/-
Найкраща відповідь

До вирішення даного питання можна підійти кількома способами:

  1. Використовувати чистий css
  2. використовувати jquery
  3. Використовувати два перші варіанти в поєднанні

Відмінність першого способу від другого полягає в тому, що в css плавність розкриття блоку важко згладити. Але в нових версіях css (на сьогоднішній день це css3) з'явилася можливість використання анімації та трансформації. Приклад можете подивитися на animation.css. Там докладні приклади.

Але краще використовувати jquery, хоча для новачків це проблематично буває.

Варіант 1 - Приклад з використанням jquery. Тут після натискання кнопки відкривається текст прихований.

Варіант 2 - Приклад з використанням jquery. Тут після натискання на кнопку відкривається прихований текст, а кнопка зникає при цьому

Варіант 3 - Приклад з використанням css

По суті варіантів реалізації даного прикладу може бути купа. Так в jquery можна використовувати не тільки fideIn і fideOut, але і hide show delay і т.д ..

Відповів на питання: Adulated  
2 +/-

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­ById ( 'ct2'). Style.display = 'block';"> Читати далееlt; / button>

або так

lt; span id ="ct1" style ="display: block">

текст 1

lt; hr>

lt; button onClick ="document.getElementById ( 'ct1'). style.display = 'none'; document.getElement­ById ( 'ct2'). Style.display = 'block';"> Читати далееlt; / button>

lt; / span>

lt; span id ="ct2" style ="display: none">

текст 2

lt; hr>

lt; button onClick ="document.getElementById ( 'ct1'). style.display = 'block'; document.getElemen­tById ( 'ct2'). style.display = 'none';"> Назадlt; / button>

lt; / span>

Відповів на питання: Fishline