title: Hide and show components depending on h:selectOneMenu value
body: <p>I have a page with a <code>&lt;h:selectOneMenu&gt;</code> and I want to show some fields or others depending on the chosen value of the menu. Is this possible and if so, how?</p>
  
  <pre><code>&lt;h:selectOneMenu id="productname" value="#{product.productname}" required="true"&gt; 
      &lt;f:selectItem itemLabel="select" itemValue="null" /&gt;  
      &lt;f:selectItem itemLabel="Detetgent" itemValue="Detergent"/&gt;  
      &lt;f:selectItem itemLabel="Dishwash" itemValue="Dishwash" /&gt;  
      &lt;f:selectItem itemLabel="Powder" itemValue="Powder" /&gt;  
      &lt;f:selectItem itemLabel="Liquid" itemValue="Liquid" /&gt;       
  &lt;/h:selectOneMenu&gt;
  &lt;h:panelGroup rendered="Detergernt"&gt;
      &lt;p&gt;This will be shown if the selected item Detergent.&lt;/p&gt;
  &lt;/h:panelGroup&gt;
  &lt;h:panelGroup &gt;
      &lt;p&gt;This will be shown if the selected item Dishwash.&lt;/p&gt;
  &lt;/h:panelGroup&gt;
  &lt;h:panelGroup &gt;
      &lt;p&gt;This will be shown if the selected item equal to powder.&lt;/p&gt;
  &lt;/h:panelGroup&gt;
  &lt;h:panelGroup &gt;
      &lt;p&gt;This will be shown if the selected item equals to Liquid.&lt;/p&gt;
  &lt;/h:panelGroup&gt;
  </code></pre>