Client side show/hide in using ibmfaces JSF components

This is a little note about showing and hiding a element(s)/control(s) from a client side event (without page refresh) using the ibm JavaServer Faces components.

The IBM documentation for the hx:behavior tag is here. But it doesn’t contain examples of how to use it and the describtion of the hx:behavior attributes is unclear in places.

behaviorAction is what you want to do (hide, show, invisible, visible etc)
targetAction requires the ID of the object you want to do the behaviorAction on.

<h:outputText style=“visibility:hidden;” id=“text7” value=“Initially i’m hidden, “></h:outputText>
<h:outputText style=“visibility:hidden;” id=“text17” value=“As am I! “></h:outputText>

<h:outputText styleClass=“outputText” id=“text6aa” value=“view hidden text,”>
<hx:behavior id=“behavior4” event=“onclick” behaviorAction=“visible;visible” targetAction=“text7;text17”> </hx:behavior>


Also found that when you specify more than one targetAction you must also specify a behaviorAction for each (which is good if you want to do different behaviorActions to each target.

Note: offically hx:behavior tags aren’t supported in h:outputText, recommended to use outputlink tag.

Info from my Ibm devworks question post