This brings
up the Insert Pane dialog box, which allows you to create a label for the Accordion and to set the container
type (Figure 11-12). The container for an Accordion pane is the layout component that is held in
the pane to organize the layout of the content that you place into it. The pane that is created automatically
when you create the Accordion is labeled Accordion Pane 1 and has a canvas component as
the container.
Figure 11-12. Insert Pane dialog box
11. Create three new panes by clicking the plus sign in the top-left corner of the Accordion component.
Name the panes Step 1 ??“ Basic Info, Step 2 ??“ Contact Info, and Step 3 ??“ Final Thoughts.
Set Form as the container for each pane.
12. As best practice, create an ID for each pane, Step1, Step2, and Step3.
13. Remove the pane that was created automatically with the Accordion (labeled Accordion Pane 1)
by selecting this pane and clicking the minus sign in the top-left corner of the Accordion component.
Your resulting Accordion will look like Figure 11-13.
225
CREATING FORMS: THE ???WILL FLEX FOR FOOD??? REGISTRATION PAGE
Figure 11-13. Accordion with all panes
We have now created three distinct steps in the Accordion. The white area below each step name is the
content area for each pane. Running the project at this point will give you a sense of how the
Accordion works. When you click the title area of each pane, it shows the content area associated with
it, while keeping the order of the panes consistent.
Pages:
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160