Topic
  • 2 replies
  • Latest Post - ‏2014-08-28T20:40:13Z by mburati
XWHK_Joe_DeLutis
XWHK_Joe_DeLutis
83 Posts

Pinned topic Collapsible Section

‏2014-08-28T15:26:16Z |

I have been researching and unable to find any documentation on how to force the Collapsible Section to default to expanded.  I have several sections on a page and want to have the first section display expanded when the page is displayed for the first time. All other sections would be collapsed.  But I also want the ability to collapse the first section.  I cannot seem to force a default of expanded for the first section. Any thoughts?

  • Dinger
    Dinger
    117 Posts

    Re: Collapsible Section

    ‏2014-08-28T19:59:56Z  

    Hi Joe,

    I couldn't find an easy way to set the section to be expanded by default. So I guess the next best thing is to just expand the section using JavaScript when the page is displayed. Here's a sample that adds a Unique Client-Side ID builder call so that the Collapsible Section's "trigger" has a unique ID, and then a Client JavaScript builder call that finds the trigger (using the unique ID) and clicks it. The JavaScript is added to the page after the locations used by the Collapsible Section, to make sure that the DOM element for the trigger has been loaded before the JavaScript is executed.

    P.S. The attached model uses the OrdersServiceProvider from the "Getting Started" samples.

    ----------------------------------------------------------------------------------------------------

    My postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.

    Attachments

  • mburati
    mburati
    2570 Posts

    Re: Collapsible Section

    ‏2014-08-28T20:40:13Z  
    • Dinger
    • ‏2014-08-28T19:59:56Z

    Hi Joe,

    I couldn't find an easy way to set the section to be expanded by default. So I guess the next best thing is to just expand the section using JavaScript when the page is displayed. Here's a sample that adds a Unique Client-Side ID builder call so that the Collapsible Section's "trigger" has a unique ID, and then a Client JavaScript builder call that finds the trigger (using the unique ID) and clicks it. The JavaScript is added to the page after the locations used by the Collapsible Section, to make sure that the DOM element for the trigger has been loaded before the JavaScript is executed.

    P.S. The attached model uses the OrdersServiceProvider from the "Getting Started" samples.

    ----------------------------------------------------------------------------------------------------

    My postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.

    It sounds like Tom's workaround may have you all set Joe, but if Collapsible Section doesn't work out for you or others that come across this thread, I wanted to let you know that there are other ways of providing expand/collapse functionality with WEF, including the Dojo Accordion and Dojo Title Pane builders.

     

    I hope that info helps,
    ..Mike Burati 
    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.