2 Replies Latest reply on Oct 31, 2007 10:09 AM by bitwyse

    Expand / Collapse Section in my Accordian

    bitwyse Level 1
      Hi All,

      I am building a form to display a large amount of information. I would like to display it in sections. I am using an accordion to break out the high level sections and that is working fine. However, within each accordion element I have a grid. I am using grid
      ...grid row
      grid item grid item . . .
      to align the data much like using a table I suppose. In a grid row I want to have a + / - icon that shows / hides data when the user clicks the + / - icon. I have that all working using visible = {"togglePlusMinus()"} in the appropriate gridItems and gridRows.

      The problem I am having is as follows: If I have three of these + / - sections and they are all collapsed by default, the accordion element still occupies the same screen real estate as if the data was expanded, it's just hidden till the users clicks the + sign to reveal the data. Is there a way to prevent it from taking up the real estate so the sections stack on top of each other until the + is clicked and then collapse when the - is clicked?

      Am I going about this the wrong way? Is there an easier way? Below is the code I am using so far.

      Thanks for any help you can offer. . . .

      STeveR

      <mx:Accordion width="85%" height="90%">
      <mx:Grid label="{_projectDetail.projectID}-{_projectDetail.projectName}" width="100%">
      <mx:GridRow>
      <mx:GridItem>
      <mx:Label text="Company"/>
      </mx:GridItem>
      <mx:GridItem>
      <mx:Text text="{_projectDetail.projectCompanyName}"/>
      </mx:GridItem>
      <mx:GridItem>
      <mx:Label text="Company Number"/>
      </mx:GridItem>
      <mx:GridItem>
      <mx:Text text="{_projectDetail.projectCompanyNumber}"/>
      </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow>
      <mx:GridItem>
      <mx:Label text="Company Information"/>
      <mx:Image id="plusProjectCompanyInformation" source="{plusMinusFilePathCompanyInfo}" click="togglePlusMinus( COMPANY_INFO )"/>
      </mx:GridItem>
      <mx:GridItem visible="{showCompanyInfo}">
      <mx:Label text="Company"/>
      </mx:GridItem>
      <mx:GridItem visible="{showCompanyInfo}">
      <mx:Label text="{_projectDetail.projectPSCCompany}"/>
      </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow visible="{showCompanyInfo}">
      <mx:GridItem/>
      <mx:GridItem>
      <mx:Label text="Branch"/>
      </mx:GridItem>
      <mx:GridItem>
      <mx:Label text="{_projectDetail.projectPSCBranch}"/>
      </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow visible="{showCompanyInfo}">
      <mx:GridItem/>
      <mx:GridItem>
      <mx:Label text="Department"/>
      </mx:GridItem>
      <mx:GridItem>
      <mx:Label text="{_projectDetail.projectPSCDepartment}"/>
      </mx:GridItem>
      </mx:GridRow>

      <mx:GridRow>
      <mx:GridItem>
      <mx:Label text="Basic Information"/>
      <mx:Image id="plusProjectBasicInformation" source="{plusMinusFilePathProjectBasicInfo}" click="togglePlusMinus( PROJECT_BASIC_INFO )"/>
      </mx:GridItem>
      <mx:GridItem visible="{showProjectBasicInfo}">
      <mx:Label text="Start Date"/>
      </mx:GridItem>
      <mx:GridItem visible="{showProjectBasicInfo}">
      <mx:Label text="{_projectDetail.projectStartDate}"/>
      </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow visible="{showProjectBasicInfo}">
      <mx:GridItem/>
      <mx:GridItem>
      <mx:Label text="End Date"/>
      </mx:GridItem>
      <mx:GridItem>
      <mx:Label text="{_projectDetail.projectEndDate}"/>
      </mx:GridItem>
      </mx:GridRow>
      </mx:Grid>
      <mx:Grid label="Time Slips">
      <mx:GridRow>
      <mx:GridItem>
      <mx:VBox>
      <mx:Label text="Some time slip information"/>
      <mx:Label text="Some time slip information"/>
      <mx:Label text="Some time slip information"/>
      </mx:VBox>
      </mx:GridItem>
      </mx:GridRow>
      </mx:Grid>
      </mx:Accordion>