4 Replies Latest reply on Oct 30, 2009 8:00 PM by Kurt Bliefernich

    How to collapse a SimpleTogglePanel ?

    Anthony Ogier Newbie

      Hello !


      I would like to know how to collapse a SimpleTogglePanel by Javascript ?


      Here is my panel :


      <rich:simpleTogglePanel id="panel" label="My Panel" switchType="client">
        Some text
      </rich:simpleTogglePanel>



      And I want that when I click on a specific button, it hides this panel :


      <script type="text/javascript">
        function toggleCommandeEditForm() {
          SimpleTogglePanelManager.toggleOnClient('onclick', $$('[id*="panel"]')[0].id);
        }
      </script>
      <a:commandButton value="Collapse" onclick="collapsePanel();" action="#{...}"/>



      This code is simply toggling my panel, but I want it to collapse everytime y click on my button...


      Do someone have any idea ?

        • 1. Re: How to collapse a SimpleTogglePanel ?
          Mikael Andersson Master

          Have a look here FishEye perhaps that can help you.


          Please post your findings on this :)


          - Micke

          • 2. Re: How to collapse a SimpleTogglePanel ?
            Anthony Ogier Newbie

            I've found some hack method looking at the sourcecode (here actually).
            Here is my javascript function :


            <script type="text/javascript">
              function collapsePanel() {
                var panel = $$('[id*="panel"]')[0];
                  if (SimpleTogglePanelManager.panels.get(panel.id).status == "true") {
                    SimpleTogglePanelManager.toggleOnClient('onclick', panel.id);
                  }
                }
            </script>



            But ... well... I found that solution disgusting, so if someone know the exact function to call to simply collapse that panel ...

            • 3. Re: How to collapse a SimpleTogglePanel ?
              Rob Offutt Newbie

              Had a similar requirement and unfortunately there doesn't appear to be an actual method you can call to accomplish this, so I expanded on your idea. Here is my javascript function:


              <script type="text/javascript">
              var base = $$('[id*="panel"]');
              var panels = new Array();
              var j = 0;
              
              for (var i=0; i < base.length; i++) {
                if ( base[i].id.indexOf("panel_") < 0 )  
                  panels[j++] = base[i].id;    
              }
              
              function collapsePanels() {
                for (i=0; i < panels.length; i++) {
                  if (SimpleTogglePanelManager.panels.get(panels[i]).status == "true")
                    SimpleTogglePanelManager.toggleOnClient('onclick', panels[i]);
                }     
              }
              
              function expandPanels() {
                for (i=0; i < panels.length; i++) {
                  if (SimpleTogglePanelManager.panels.get(panels[i]).status == "false")
                    SimpleTogglePanelManager.toggleOnClient('onclick', panels[i]);
                }     
              }
              
              collapsePanels();
              </script>     
              

              • 4. Re: How to collapse a SimpleTogglePanel ?
                Kurt Bliefernich Newbie

                I had to do something similar with a button inside the simpleTogglePanel. 



                <rich:simpleTogglePanel switchType="client" label="Toggle Panel" styleClass="uniqueClassName">

                ...

                <input type="button" value="collapse" onclick="SimpleTogglePanelManager.toggleOnClient(event,$$('div.uniqueClassName')[0].id);" />

                </rich:simpleTogglePanel>


                That worked for the simple case of closing a panel on click of a button.