title: Show/Hide RichFaces component onclick client-side? (without AJAX)
body: <p>I'm looking for a way to show/hide an arbitrary RichFaces component. In this case, I have a <code>&lt;rich:dataTable&gt;</code> 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:</p>
  
  <ol>
  <li>The "Show details" link is re-rendered as "Hide details"</li>
  <li>The associated detailsColumns should become visible (starting from a state of <code>rendered="true"</code> but <code>style="display: none;"</code>).</li>
  </ol>
  
  <p>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.</p>
  
  <p>The following pseudo-code (hopefully) illustrates my goal:</p>
  
  <p></p>
  
  <pre><code>&lt;rich:column&gt;
      &lt;a href="#" onclick="#{thisRow.detailsColumn}.show();" rendered=""&gt;Show details&lt;/a&gt;
      &lt;a href="#" onclick="#{thisRow.detailsColumn}.hide();" rendered=""&gt;Hide details&lt;/a&gt;
  &lt;/rich:column&gt;
  
  &lt;rich:column&gt;
      &lt;h:outputText value="#{thisRow.someData}" /&gt;
  &lt;/rich:column&gt;
  
  &lt;rich:column id="detailsColumn" colspan="2" breakBefore="true"&gt;
      &lt;h:outputText value="#{thisRow.someMoreData}" /&gt;
  &lt;/rich:column&gt;
  </code></pre>
  
  <p></p>