Jquery Складывающиеся панельки show_all_message,hide,show
[red]Ну а теперь чуть-чуть скомбинируем предыдущие примеры и
создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox).
(см. пример)[/red]
[blue]Code
скрываем все элементы <div class=”message_body”> после первого.
скрываем все элементы <li> после пятого
клик по <p class=”message_head”> – вызывает метод slideToggle для следующего элемента <div class=”message_body”>
клик по <a class=”collpase_all_message”> – вызывает метод slideUp для всех <div class=”message_body”>
клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slideDown для всех <li> послепятого
клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slideUp для всех <li> после пятого
[/blue]
Код
Code
$(document).ready(function(){
//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();
//hide message li after the 5th
$(".message_list li:gt(4)").hide();
//toggle message_body
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});
//collapse all messages
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});
//show all messages
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});
//show recent messages only
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});
});