Html – How to conditionally render plain HTML elements like


I'm trying to implement a composite component which either displays the information details of a user in plain text or displays them through editable input texts fields if the desired details are those of the user currently connected.

I know that al UI Components can be rendered via the rendered attribute but what about the ones which are not UI Components (for example divs)

<div class = "userDetails" rendered = "#{ !=}">
    Name: #{}
    Details: #{cc.attrs.value.details}

<div class = "userDetails" rendered = "#{ ==}">

I know that the div doesn't have the rendered attribute and probably I'm not taknig the right approach at all. I could very easily use an JSTL tag but I want to avoid that.

Best Solution

The right JSF component to represent a HTML <div> element is the <h:panelGroup> with the layout attribute set to block. So, this should do:

<h:panelGroup layout="block" ... rendered="#{someCondition}">

Alternatively, wrap it in an <ui:fragment>:

<ui:fragment rendered="#{someCondition}">

Or when you're already on JSF 2.2+, make it a passthrough element:

<div jsf:rendered="#{someCondition}">


Do note that when you'd like to ajax-update a conditionally rendered component, then you should be ajax-updating its parent component instead.

See also: