Свертывание и развертывание текста с кнопкой «Подробнее»

В очередной раз сталкиваясь с препятствиями по своей специализации вебмастера я решил, что буду писать мини-посты в которых я буду излагать решения популярных и не очень популярных проблем. Сегодня я расскажу о моменте который волнует много людей пытающихся самостоятельно строить свой бизнес в интернете без посредников.
Наверняка многие из Вас сталкивались с бедой когда нужно на странице слишком большой текст спрятать и по надобности развернуть его кнопкой "Подробнее" или "Читать далее", при этом оставаясь на текущей странице. Вообще вариантов полно. Я расскажу как можно решить задачку при помощи стилей CSS и JavaScript.

Первым делом рекомендую в шапке прилинковать jQuery, т.е. прописать строчку в шаблоне сайта:


Затем в стиле шаблона (например у кого-то это файл style.css) прописать следующее:

.opis{display:none; text-align: justify;}

Третий шаг - заключаем текст котовый хотим скрыть в блок DIV:

Ваш скрытый текст

подробнее

И на той же самой странице вставляем вот такой JavaScript код:



После всех проделанных шагов, сохраняемся и обновляем страницу. Те кто сделали все правильно - должно всё работать как часы. Те у кого не получилось, не расстраивайтесь

Метки записи: