Есть два "родных" способа скрыть какой-либо элемент интерфейса. Первый способ - не рендерить его вообще:
<p:commandButton value="Скрыть/Показать">
<f:ajax listener="#{exampleBean.toggleVisibility}" event="click" render="somePanel"></f:ajax>
</p:commandButton>
<h:panelGroup id="somePanel" layout="block" rendered="#{exampleBean.visible}">
<div>Трям!</div>
</h:panelGroup>
Второй - задать ему соответствующий класс:
<h:panelGroup id="somePanel" layout="block" styleClass="#{(exampleBean.visible) ? 'hidden' : ''">
<div>Трям!</div>
</h:panelGroup>
Можно, конечно, и обработчики javascript навесить на события:
<script>
function toggleVisibility(id) {
var table = document.getElementById(id);
if(table) {
var currentState = table.style.display || 'block';
if (currentState === 'block')
table.style.display = 'none';
else
table.style.display = 'block';
}
return false;
}
</script>
<p:commandButton value="Скрыть/Показать" onclick="toggleVisibility('globalform:visTest:checking');">
</p:commandButton>
Но надо оно вам? Происходит размазывание сильносвязанного кода, появляются всякие сложности, типа автогенерируемых идентификаторов, да и много ещё чего. Всё это преодолимо, конечно, если оно того стоит.
