Как свернуть текст, поставив кнопку «читать далее»?

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

1. Использовать чистый css
2. Использовать jquery
3. Использовать два первых варианта в сочетании

Отличие первого способа от второго заключается в том, что в css плавность раскрытия блока тяжело сгладить. Но в новых версиях css (на сегодняшний день это css3) появилась возможность использования анимации и трансформации. Пример можете посмотреть на animation.css. Там подробные примеры.

Но лучше использовать jquery, хотя для новичков это проблематично бывает.

Вариант 1 - Пример с использованием jquery. Тут по нажатию кнопки открывается текст скрытый.

Вариант 2 - Пример с использованием jquery. Тут по нажатию на кнопку открывается скрытый текст, а кнопка исчезает при этом

Вариант 3 - Пример с использованием css

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