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>