Unclutter your website with simple jQuery javascript show and hide

Here’s a tip to reduce clutter on a page with lots of repeating links, icons and/or elements. Say you have a list of search results on your website and each result has many action icons and links. It isn’t necessary to have to links and icons visible at all times. The non-vital content can be hidden by default and only shown when the user hovers over the search result containing element.

Check out this hiding non-vital content example.

The method for the example is very simple and can be accomplished with a small jQuery function and a single class assigned to each element we want to hide. This can of course be done with plain old javascript as well but I’ll use jQuery because it’s so darn easy.

Here is the jQuery code:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function() {
//hide secondary content
$(".secondaryContent").css("visibility","hidden");
 
// toggle secondary content items on hover
$("#p110_showHideExample li").hover(function() {
	$(this).find(".secondaryContent").css("visibility","visible");
},function(){
	$(this).find(".secondaryContent").css("visibility","hidden");
});
});

Now all we need to do is add the class “secondaryContent” to any element we want to be visible only when the user mouses over the containing element.

For example, here is the remove link html from the upper right corner of the example:

1

<div class="delete secondaryContent"><a href="#">X</a></div>

Tags: javascript, jquery, user interface design
Filed under: Code, UI, jquery by E.P.