Four more core effects are Show, Toggle, Fade In, and Animate.   This week’s portlet and the screencast below gives a demonstration of these four effects in a Liferay Portlet. As I should have mentioned last time, the code within the portlet to do one of these effects is very small. Here’s the code for the toggle:

jQuery('#link2').click(function() { jQuery('# block2').toggle();});

Of course, you have to setup a “div” with a unique “id=”. For portlets, we simply prepend the tag which makes the id unique across the portal. Take a look at the source code in the portlet’s view.jsp file for more information. I tried to keep the jQuery code clean and simple so beginners shouldn’t have to cringe too much .

This week I’ll start with another very interesting look at using the extremely powerful jQuery library within Liferay portlets. Many new users to Liferay are unaware of these core features so I thought I would start out with introducing four of them – Fade Out, Slide up, Hide and Slide Down .

The video below shows a screencast using each. To get a copy of the portlet used in this demo go to the downloads sections of this site.