$().bind() / $().trigger() Custom Event jQuery Demo
Collapse -
Expand
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sapien nisl, malesuada
vitae, facilisis id, suscipit vitae, purus. Etiam velit felis, rhoncus vel, rutrum
consequat, porta ut, enim. Nam enim tellus, sollicitudin vitae, pharetra et, congue sed,
nulla. Morbi augue leo, congue a, hendrerit at, laoreet ut, nibh. Praesent eu purus et
neque posuere bibendum. Aliquam nibh dolor, ullamcorper iaculis, rutrum at, sagittis sit
amet, tellus. Sed feugiat, nunc vel molestie aliquet, orci pede tincidunt magna, vel
iaculis enim nulla eget est. Donec pede. Nulla lorem. Donec id lacus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sapien nisl, malesuada
vitae, facilisis id, suscipit vitae, purus. Etiam velit felis, rhoncus vel, rutrum
consequat, porta ut, enim. Nam enim tellus, sollicitudin vitae, pharetra et, congue sed,
nulla. Morbi augue leo, congue a, hendrerit at, laoreet ut, nibh. Praesent eu purus et
neque posuere bibendum. Aliquam nibh dolor, ullamcorper iaculis, rutrum at, sagittis sit
amet, tellus. Sed feugiat, nunc vel molestie aliquet, orci pede tincidunt magna, vel
iaculis enim nulla eget est. Donec pede. Nulla lorem. Donec id lacus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sapien nisl, malesuada
vitae, facilisis id, suscipit vitae, purus. Etiam velit felis, rhoncus vel, rutrum
consequat, porta ut, enim. Nam enim tellus, sollicitudin vitae, pharetra et, congue sed,
nulla. Morbi augue leo, congue a, hendrerit at, laoreet ut, nibh. Praesent eu purus et
neque posuere bibendum. Aliquam nibh dolor, ullamcorper iaculis, rutrum at, sagittis sit
amet, tellus. Sed feugiat, nunc vel molestie aliquet, orci pede tincidunt magna, vel
iaculis enim nulla eget est. Donec pede. Nulla lorem. Donec id lacus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sapien nisl, malesuada
vitae, facilisis id, suscipit vitae, purus. Etiam velit felis, rhoncus vel, rutrum
consequat, porta ut, enim. Nam enim tellus, sollicitudin vitae, pharetra et, congue sed,
nulla. Morbi augue leo, congue a, hendrerit at, laoreet ut, nibh. Praesent eu purus et
neque posuere bibendum. Aliquam nibh dolor, ullamcorper iaculis, rutrum at, sagittis sit
amet, tellus. Sed feugiat, nunc vel molestie aliquet, orci pede tincidunt magna, vel
iaculis enim nulla eget est. Donec pede. Nulla lorem. Donec id lacus.
$(
function(){
var jUL = $( "ul" );
// Bind the custom events to the li.
jUL
.bind(
"collapse",
function( objEvent ){
// Collapse LI elements.
jUL.find( "li" ).slideUp();
}
)
.bind(
"expand",
function( objEvent ){
// Expand LI elements.
jUL.find( "li" ).slideDown(
function(){
jUL.find( "li" ).removeAttr( "style" );
}
);
}
)
;
// Bind the collapse link.
$( "a:first" )
.attr( "href", "javascript:void( 0 )" )
.click(
function( objEvent ){
// Trigger custom event on list.
jUL.trigger( "collapse" );
// Prevent default.
return( false );
}
)
;
// Bind the expand link.
$( "a:last" )
.attr( "href", "javascript:void( 0 )" )
.click(
function( objEvent ){
// Trigger custom event on list.
jUL.trigger( "expand" );
// Prevent default.
return( false );
}
)
;
}
);