Collapsible Sections

Page Design

The pages in this example are designed to create an accordion effect where each section in the accordion can either be expanded or collapsed. 

On the Static Sections page, we manually create each section in the Editor. On the Dynamic Sections page, we create one section in a repeater and connect that repeater to a dataset.

Each collapsable section is enclosed in a container box. In our example, the box contains:

• Text element

• Image

Of course, you can choose to put any elements you want in the container.

To create the accordion on the Static Sections page, do the following for each section:

1. Decide on a name for the section (for example, ‘New York’).

2. Add a button as part of the section header, change its text to the section name, and change its ID to xxxCollapseButton, where xxx is the section name in camelCase.

3. Add two images, one as an indicator that the section is expanded (+) and the other as an indicator that the section is collapsed (-). Change their IDs to xxxExpandedIndicator and xxxCollapsedIndicator, where xxx is the section name in camelCase.

4. In the Properties and Events panel, set the expanded indicator to be Hidden and place the images one on top of the other. This setup corresponds to the default state for the section, which is collapsed when the page loads.

5. Add a container box below the section header and change its ID to xxxCollapsibleBox, where xxx is the section name in camelCase.

6. Add any elements you want to the container box. Just make sure that all of the elements are completely contained inside the box.

7. Select the container box and use the Properties & Events panel to set its Collapsed default value to be true.

To create the accordion on the Dynamic Sections page, do the following:

1. Add a button as part of the section header, and change its ID to collapseButton.

2. Add two images, one as an indicator that the section is expanded (+) and the other as an indicator that the section is collapsed (-). Change their IDs to plusSign and minusSign.

3. In the Properties and Events panel, set the minus sign to be Hidden and place the images one on top of the other. This setup corresponds to the default state for the section, which is collapsed when the page loads.

4. Add a container box below the section header and change its ID to collapsibleBox.

5. Add any elements you want to the container box. Just make sure that all of the elements are completely contained inside the box.

6. Select the container box and use the Properties & Events panel to set its Collapsed default value to be true.

Page Code

The page code handles the functionality of expanding and collapsing the sections when a site visitor clicks on the header. This is achieved by creating an onClick event handler for the buttons in each of the accordion's sections. This works slightly differently for the static and dynamic options.

To create the toggle function for the static sections:

• Create a function that receives three elements, a collapsible box and its collapsed and expanded indicators.

   function toggleBox(boxElement, plusSign, minusSign) {};

• Inside the function, retrieve the current state of the box: 

   const isCollapsed = boxElement.collapsed;

• If the box is currently collapsed, we want to expand it. So hide the collapsed indicator, show the expanded indicator, and expand the box.

        if (isCollapsed) {

     plusSign.hide();

     minusSign.show();
     boxElement.expand();

   }

• Otherwise, the box is currently expanded and we want to collapse it. So hide the expanded indicator, show the collapsed indicator, and collapse the box.

   else {
     minusSign.hide();

     plusSign.show();

     boxElement.collapse();

   }

To create the onClick event handlers for the static sections:

• Since the event handlers are being added to page elements, they need to wait for the elements to be ready. That means they need to be added inside the $w.onReady event handler. Add an event handler for one of the section header buttons. Make sure to change the ID in the code below to match your section button's ID.

        $w.onReady(function () {

     $w('#sectionCollapseButton').onClick(() => {

     // handle button click here

     });

   });

• Inside the event handler function, call the toggleBox() function and pass it the collapsible box and indicators from the corresponding section. Use the $w() function to select the elements by their IDs. Make sure to change the ID in the code below to match your section button box and indicators.

   toggleBox($w('#sectionCollapsibleBox'), $w('#sectionPlusSign

), $w('#sectionMinusSign));

• Add additional onClick event handlers for each section in your accordion. Make sure the IDs match the elements of each particular section.

To create an onClick event handler for the dynamic sections:

• Since the event handler is being added to page elements, it needs to wait for the elements to be ready. That means it needs to be added inside the $w.onReady event handler. Add an event handler. 

        $w.onReady(function () {

     $w('#collapseButton').onClick(() => {

     // handle button click here

     });

   });

• Inside the event handler function, we need to get a selector function that is scoped to the repeater item that was clicked on.

   const $item = $w.at(event.context);

• Then we can use the scoped selector function to add the toggle functionality.

      if ($item('#minusSign').hidden) {

     $item('#collapsibleBox').expand();

     $item('#plusSign').hide();

     $item('#minusSign').show();

   } else {

     $item('#collapsibleBox').collapse();

     $item('#plusSign').show();

     $item('#minusSign').hide();

   }