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:

1. The "Show details" link is re-rendered as "Hide details"
2. 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>