I'm looking for a way to show/hide an arbitrary RichFaces component. In this case, I have a <rich:dataTable> that contains several rows. Each row needs to have it's own, independent Show/Hide link, such that when you click "Show details", two things happen:
The "Show details" link is re-rendered as "Hide details"
The associated detailsColumn is displayed.
Furthermore, detailsColumns should be hidden by default (effectively rendered="true" to the client but hidden with style="display: none;").
I don't want to write my own JavaScript functions if it's not absolutely necessary. I also don't want to have a server-side
bean keep track of which detailColumns are being displayed, and subsequently re-render everything over AJAX: this should be purely client-side behavior. I'm not sure how to accomplish that.
The following pseudo-code (hopefully) illustrates my goal:
<rich:column>
<a href="#" onclick="#{thisRow.detailsColumn}.show();" rendered="">Show details</a>
<a href="#" onclick="#{thisRow.detailsColumn}.hide();" rendered="">Hide details</a>
</rich:column>
<rich:column>
<h:outputText value="#{thisRow.someData}" />
</rich:column>
<rich:column id="detailsColumn" colspan="2" breakBefore="true">
<h:outputText value="#{thisRow.someMoreData}" />
</rich:column>
