Архив метки: Скрытие

AJAX Показ и скрытие контента по нажатию на элемент

ajax_hide_showНеобходимо по нажатию показать некий контент, при повторном нажатии его скрыть.

Это можно сделать с помощью нескольких  AJAX функций:

1.  fadeToggle(«slow»);

Пример листинг

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id=sl>Коротко</div><br><br>
<div id=sll>
<img src="jpg.jpg">
по нажатию <br>
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
</div>
<script>
$("#sl").click(function () {
$("#sll").fadeToggle("slow");
});
</script>
</body>
</html>

2. .toggle()

Пример листинг

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div id=sl>Коротко</div><br>
<div id=sll>
<img src="jpg.jpg">
по нажатию <br>
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
<script>
$("#sl").toggle(function() {
$("#sll").slideUp("slow");
}, function() {
$("#sll").slideDown("slow");
});
</script>
</body>
</html>

Тоже самое можно проделать силами только CSS3 пример тут