NextGen Knowledge Center

Insert a Collapsible Panel Field

You can insert expandable/collapsible panels to show/hide a larger amount of content on a single template. You can include a background image on the panel.
After you create a collapsible panel, you can add other fields and triggers to it. You can also swap the position of two selected collapsible panels.
  1. Drag the Collapsible Panel icon from the Fields toolbar to the template design area where you want to place it.
    The Insert Panel window opens.

  2. In the Name text box, enter the name you want to assign.
  3. To reposition the panel vertically and resize the height of the panel on the template, do the following:
    1. Enter the appropriate numeric value to replace the current vertical coordinate displayed in the second Position text box.
      The first value for the horizontal coordinate is set automatically. You can use a template Pos X Panels preference to specify a fixed starting position for the collapsible panel. You can also drag the panel to another position.
    2. Enter the appropriate numeric value to replace the current height displayed in the second Size text box.
      The first value for the width is set automatically, based on the template width and the horizontal starting position.
  4. To automatically expand the panel when the template is loaded, select the Show Expanded check box.
    The panel is collapsed by default.
  5. To collapse the panel to a specified height, enter the height value in the Persistent Height text box.
    The panel collapses to the height of the header by default. The persistent area is beneath the header.
  6. If you do not want to show an expand/collapse Toggle button on the panel header at run time (up or down arrow), clear the Show Toggle Button check box.
    This check box is selected by default. You can also expand/collapse collapsible panels by using the Toggle Panel trigger on a template field.
  7. To automatically expand the panel when new rows are added to a data sheet on it, select the Auto Grow check box.
    Any fields under the data sheet move down to accommodate the new size of the data sheet.
  8. If you add a background image to the panel, select the Stretch Background check box to stretch the image to the size of the panel.
    If the Auto Grow option is also selected, the image stretches as the panel grows.
  9. To add a background image to the panel, select the Background Image tab.

    1. Select Hi-Res or Lo-Res.
    2. Do one of the following:
      • Select the background image from the Hi-Res or Lo-Res list.
      • To display the Open window for selecting an image that is not in the list, select the ellipsis button, select the image, and then select Open to enter the image in the Template Properties window.
      Template Editor displays the selected image in the Preview window.
  10. Select OK and save your template.
Insert a Collapsible Panel Field