Доброго времени суток. Такое свойство принято называть спойлером.
Моё мнение о JavaScript
JavaScript - это зло и ничего больше. Через него мы можем хозяйничать на компьютере клиента, без его ведома управлять окнами, загружать файлы и многое другое. Помимо всех дырок в безопасности (а их миллионы) даже простейшая функция document.write() даёт неслабую нагрузку на ЭВМ пользователя.
Я предложу Вам вариант как на чистом CSS, так и на JS. Если я Вас переубедил - воспользуйтесь первым способом.
Способ 1. HTML+CSS
HTML:
<! DOCTYPE HTML >
<html>
<head>
<meta charset="UTF-8" />
<title>Example</titl<wbr />e>
</head>
<body>
<div class="spoiler">
Нажми на меня!
<div class="spoiler-conte<wbr />nt">$СОДЕРЖИМОЕ$</div<wbr />>
</div>
</body>
</html>
CSS:
.spoiler-content { display: none; }
.spoiler:active .spoiler-content { display: block; }
.spoiler-content:ho<wbr />ver { display: block; }
**Способ 2. HTML+CSS+JavaScript*<wbr />*
HTML:
<! DOCTYPE HTML >
<html>
<head>
<meta charset="UTF-8" />
<title>Example</titl<wbr />e>
</head>
<body>
<a href="#" class="spoiler"><spa<wbr />n>Нажми на меня!</span></a>
<div class="spoiler-conte<wbr />nt">$СОДЕРЖИМОЕ$</div<wbr />>
</body>
</html>
CSS:
spoiler-content { display: none; }
JavaScript:
$(document).on('clic<wbr />k', '.spoiler', function(e) {
e.preventDefault();
$(this).toggleClass(<wbr />'active');
$(this).parent().fin<wbr />d('.spoiler-content')<wbr />.first().slideToggle(<wbr />300);
});