title: How to open and close rich:popupPanel from the same link
body: <p>I follow this example from the showcase: <a href="http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&amp;sample=login&amp;skin=blueSky" rel="nofollow">http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&amp;sample=login&amp;skin=blueSky</a>
  it show how I can click on a link to open a popupPanel and append that panel to the same position of that link. But I want so that if I click again, it will close the panel. Anyone know how to achieve that? Here is my code</p>
  
  <pre><code>    &lt;h:outputLink value="#" id="sb-dd-ol" &gt;
          &lt;rich:componentControl event="click" operation="show" target="sb-dd-pp"&gt;
              &lt;a4j:param noEscape="true" value="event"/&gt;
              &lt;rich:hashParam&gt;
                  &lt;a4j:param noEscape="true" name="top"
                             value="jQuery(#{rich:element('sb-dd-ol')}.parentNode).offset().top + 
                                    jQuery(#{rich:element('sb-dd-ol')}.parentNode).height()" /&gt;
                  &lt;a4j:param noEscape="true" name="left" 
                             value="jQuery(#{rich:element('sb-dd-ol')}.parentNode).offset().left" /&gt;
              &lt;/rich:hashParam&gt;
          &lt;/rich:componentControl&gt;
          Test
      &lt;/h:outputLink&gt;
      &lt;rich:popupPanel id="sb-dd-pp" autosized="true" modal="false" 
                       moveable="false" resizeable="false" followByScroll="false"&gt;
          This is a test
      &lt;/rich:popupPanel&gt;
  </code></pre>