Tech Tip: Creating Collapsible Sections
If your DataPage has a very long series of input fields, some of which may not apply to every end-user, you can divide your DataPage into sections and hide or show them when needed. This method can be used on Submission Forms, Update Forms, search and details pages of Reports, as well as Password Recovery Forms. This article will explain first how add these sections to an existing Submission Form. The article then explains how to add buttons to toggle visibility. You can also configure your DataPage sections to display based on received parameters.
Steps to creating collapsible sections using toggle buttons:
1. Add HTML blocks to surround sections
Open the DataPage wizard by selecting your DataPage and clicking the Edit button. Proceed to the Configure Fields screen. We are going to add HTML Blocks to separate each section. Using the Insert button, at the lower right-hand corner of the DataPage Elements panel, insert an HTML Block.
Using the arrow buttons below the DataPage Elements panel, move the fields that will be included in the first collapsible section below this first HTML block. Then use the Insert button to add another HTML Block. This HTML block will serve both as the end of the first section and the beginning of the second. Move the appropriate fields to the second section and repeat the process until all of the sections have been marked out by HTML Blocks.
2. Create tables to encapsulate the section fields
To hide the separate sections we are going to create HTML tables and set their visibility to ‘none’. In the first HTML Block create an HTML table tag. Set its id attribute to “Section1” and set its style attribute to “display:none”. Immediately after the table tag open a table data (td) tag.
Go to the second HTML Block. Close the table data tag and then close the table tag. If you were to preview the DataPage now, this first section would not be visible. In the second HTML block create a new HTML table and table data tag, but this time set the table id to “Section2”. The second set of tags will be closed in HTML Block number three. Repeat this process until all of the sections are enclosed in HTML table tags.
3. Create buttons to toggle visibility
The tables we created are currently hiding all of the fields. In the gaps between the tables, we are going to create buttons to toggle the section’s visibility. Before the opening HTML table tag in each HTML Block add an input tag with the type button. Replace the onClick attribute with a function called “Displayer()”. In the parenthesis after Displayer enter the number of the current section, e.g. Displayer(1) . Set the value attribute of the button to the section title. The value attribute will be the text displayed on the button.
Note: Instead of buttons you can use another HTML objects such as a links or images. Simply add Displayer as the onClick funtion to that object.
4. Add the Displayer function to the footer
Using the Insert button, select Header & Footer to add these sections. Insert the Displayer function into the footer section. The Displayer function is written to accept an unlimited number of sections as long as the number passed to the function corresponds to the name of the section. (e.g. 4 is passed to toggle the visibility of section4).
Testing and Formatting
By default, all of the sections we created will be hidden. You can change a section’s default visibility by setting the HTML table’s style attribute to “display:inline;” instead of “display:none;”.
If you would like to add columns to this DataPage, use the Insert button to add a New Section just after the first HTML Block. Change the column number as desired. Before the closing HTML Block add another New Section and reset the column number to one.
Advanced: Using Parameters to dynamically hide sections
You can also dynamically hide sections using received parameters. Be sure to enable Advanced Options and Parameters for this DataPage to receive parameters.
Create the HTML Block / HTML tables structure as before.
In the footer a duplicate of the following code for every section in your DataPage. Replace the section number as needed. Make sure that all of the code is surrounded by script tags.
Replace the Parameter name with the parameter you are receiving. Make sure the parameter is formatted correctly: [@xxxxx] and is surrounded by single quotes. Also change the value to match the value expected.
If the received parameter’s value matches the expected value, the section will be visible.
<!–Opening Table HTML:–>
<table id="Section1" style="display:none;"><td>
<!–Closing Table HTML:–>
<!–HTML Input Tag for Buttons:–>
<input type="button" onClick="Displayer(1)" value="Section 1 Title"><br>
var check = document.getElementById('Section'+n);
if(check.style.display == 'none')
var check = document.getElementById('Section1');
if('[@Parameter]' == 'value')