Show/Hide areas are common place now all over the web and are an easy way to display large amounts of information that may/may not be useful to all readers. The [+] and [-] images are the key, and changing these must be seamless..
Enter jQuery.
$(document).ready(function() {
$('.searchItem').hide(); //initial hide
$('a#showHideBtn').toggle(
function(){
$('.searchItem').show('slow');
$('#showHideImage').attr('src','../images/hide.gif');
}, function() {
$('.searchItem').hide('slow');
$('#showHideImage').attr('src','../images/show.gif');
});
}); |
Write a Comment
Let me know what you think?