In a JSF page I needed to hide a div component on the basis of a certain condition.

Here is an example of the Dept and Employee records. We have a  Div which displays the employee records when the "Show Employee Records" button is clicked. The div will be hidden if the dept object has no employees.

Following is the html snippet for the same.

<aa:zoneJSF id="AjaxResultsZone">
<div id="employeeRecordsDiv" style="visibility: #{deptBean.isEmployeeDataAvailable}">
---
---
---
</div>

<h:commandButton id="submitButton" type="button"
                                        value="Show Employee Records"
                                        onclick="showEmployeeRecords()" />
</aa:zoneJSF>

In the above example, we can put this div in an Ajax zone and on a submit event reload the azax zone.
by default the teh value of the flag  isEmployeeDataAvailable will be ''HIDDEN'.
The method showEmployeeRecords should invoke a method in the bean object which will set this flag value to 'VISIBLE' if the records in the bean exists.