Скрываем/отркрываем абзац с текстом одной строкой jQuery.

Эта страничка демонстрирует эффект постепенного скрытия/раскрытия элементов.

Абзац, внутри которого написан этот текст,
содержится в обрамленном контейнере, который задает стиль текста. Кликните мышкой по этому тексту, а потом еще раз.

У абзаца задан идентификатор <p id="slide" >, а в контейнере, внутри которого этот абзац задан обработчик события на jQuery: onclick="$('#slide').slideToggle('slow')".

Функция $(), принимающая в качестве агрумент селектор CSS (а точнее селектор jQuery) отбирает множество объектов, которые соответствуют этому селектору. В данном случае - это один объект с id="slide" - это наш абзац. Дальше вызывается функция slideToggle('slow'), которая скрывает или открывает элемент, в зависимости от его текущего состояния путем постепенного изменения его высоты. Для просмотра этого эффекта просто кликните мышкой в обрамленной области, а потом еще раз.

Ниже размещен полный код контейнера:

<div onclick="$('#slide').slideToggle('slow')"
style="font-family: Verdana; font-size: 17px; border: 1px solid #777777; width: 500px">
Эта страничка демонстрирует эффект постепенного скрытия/раскрытия
элементов.
<p id="slide" >Абзац, внутри которого написан этот текст,
содержится в обрамленном контейнере, который задает стиль
текста.</p> </div>