Resources
Windows 7 OS, InfoPath Designer 2013, Character Map, Notepad
Preparation
In InfoPath Designer, we want to make sure we can see the panes for Fields and Rules on the left. To show the Fields task pane, click the Show Fields button at the very left of the DATA tab on the ribbon.
To show the Rules task pane, click the Manage Rules button at the far right of the HOME tab on the ribbon.
In addition to InfoPath Designer, open Notepad and the Character Map as well. In Windows 7, both are in Accessories. Character Map is one folder deeper in Accessories > System Tools.
Pick Out Your Button Symbols
The toggle button which will show/hide a section is just a normal character in a special font like Webdings. I’ll be using the Webdings font with character 0x34 
for when the section is currently being shown and 0x36 
for when the section is hidden. Pick out the symbols you want then determine what key to actually type to get that symbol.
In Character Map, choose the font and symbols you want to use. With the symbol highlighted, click the Select button. Do this for both symbols, then click the Copy button. Paste in Notepad to get the keys you will type in InfoPath to get these button symbols.
For this example, note to get the symbol I want to use when the section is shown I type a “6” in InfoPath and make the font Webdings. For the other symbol I’ll type a “4”. This will make more sense later.
Creating the Elements
The elements that need to be created in the form using InfoPath Designer are a field, button, section, and a few rules to govern the behavior we want.
Field
First, create the field. Click Add Field at the bottom of the Fields task pane under Actions.
Choose a name that makes sense like HideShowButtonText. This is exactly what this field is going to be, the text for the button which toggles hiding or showing a section. Leave Type and Data type as default (Field (element) and Text (string) respectively). Set the Default value to 6. Leave everything else alone and click OK.
Button
Starting from an empty form editor, place a button. You can achieve this by finding the Button option under Controls in the middle-left of the HOME ribbon.
Just click it. Once you’ve done so, you can optionally get rid of the border and color of the button, so that we just see the symbols chosen at the beginning. If you want to do this, right click the button and choose Borders and Shading. Under the Borders tab and under Presets, simply click None; under the Shading tab, simply choose No color. Hit OK.
Right click the button and choose Button Properties. Under the first tab, General: Leave the Action set to default (Rules and Custom Code). Make the ID something that makes sense like hideShowButton. The Label is what’s most important. We’ll set the Label to the Field HideShowButtonText we created earlier. To do so, click the Insert Function button next to Label.
In the Insert Formula window, click the Insert Field or Group button at the bottom left. This will bring up the Select a Field or Group window. Choose the HideShowButtonText field. Hit OK, OK, OK. Now you see a button that says “6.” Once again right click the button to bring up the text formatting dialog. Change the font to Webdings and the size to what you want.
Now we have a button that makes sense.
Section
In the editor space a few times or hit enter for a line break after the button and then insert a section control (same way as inserting the button control, except choose section). Type something in it (like “This is my section to be shown or hidden”) so that we can, so that we can test/witness the show-hide functionality later.
Rules
Section Rule
There are three rules needed for the desired behavior. One rule is applied to the section, and two are for the actual button control. Since we just created the section, let’s set its rule while it’s handy.
Select the Section by clicking where it has a little tab at the bottom left (and says Section). In the Rules task pane, click New and choose Formatting. Name the Rule something that makes sense like Hide Section. This is what the rule is going to do: hide the section based on the condition that the hideShowButton’s value. Under Condition click where it says None to set the condition. The condition we want is:
HideShowButtonText is equal to 4.
To get 4, click the dropdown and select type text to make that part editable and enter 4. We want 4, because that’s what the chosen down arrow symbol is in Webdings font. Click OK.
Now, under Rule type check the Formatting box which says Hide this control.
The final result should look like this:
Button Rules
The next rules will be set on the button itself. Action rules set for a button operate like this: the button is clicked; it looks for some condition(s); it performs some action(s). The condition(s) and action(s) are set by you of course. We will set one rule which changes the button’s value 6 to 4 and a second rule to do the opposite.
The “show” rule which changes the button’s value from 6 to 4 (down-arrow to right-arrow, show to hide) will be set by first clicking on the button control. In the Rules task pane, click New and choose Action. Name the rule something that makes sense like From Down-Arrow to Right-Arrow. This is exactly what this rule will do, see that the value of the button is currently a down-arrow and change the value to a right-arrow. Under Condition, click where it currently says None in blue. The condition we want is:
HideShowButtonText is equal to 6.
Hit OK.
Now we want to set an action. Next to Run these actions, click the Add button. Choose Set a field’s value. For field click the field selector button to the right, then choose HideShowButtonText from under myFields in Select a Field or Group window. Hit OK. In value, just type 4. Hit OK.
At the bottom of the Run these actions section of the Rules task pane, click the check box for Don’t run remaining rules if the condition of this rule is met.
The result we want is this:
Next, we’ll create the rule which will do exactly the opposite, change the button’s value from 4 to 6. With hideShowButton still selected, click New in the Rules task pane. Choose Action again. Name the rule something like Right-Arrow to Down-Arrow. Set the Condition to HideShowButtonText is equal to 4.
Next to Run these Actions, click Add, then click Set a field’s value. For Field choose HideShowButtonText. For Value type 6.
Hit OK. At the bottom of the Run these actions section of the Rules task pane, click the check box for Don’t run remaining rules if the condition of this rule is met.
The result we want is this:
Results and Considerations
This concludes the set up. To test the show/hide functionality of the form, click Preview at the very right of the HOME ribbon. That will pop up a fully functioning InfoPath Filler form based on what’s saved. It will open the button in the down-arrow position and a section to the right or under it which says “This is my section to be shown or hidden.”
I've added a Heading for clarity
Click the toggle button, which will cause it to change to the right-arrow position and hide the section.
One thing you might want to consider is whether you want the section shown or hidden by default. Here we’ve set the section to show up when the form is opened. To make it so that the section is hidden by default, change the default value of the HideShowButtonText field from 6 to 4.
Addendum
Fonts
Picking the font/symbols is more limited than this would initially have you belief. Testing later, I found that the characters chosen didn't render in Webdings font in any Firefox or Safari. Neither did symbols in any of the Wingdings fonts render correctly. They worked fine in IE, but not in other browsers.
My workaround was to instead choose a web safe font Times New Roman, choose the arrow characters from that font in character map to copy and paste. Those work across the board in all three of the aforementioned browsers.
Kind of weird because as far as I understand, Webdings, Wingdings, Wingdings 2, and Wingdings 3 are all supposed to be supported by Firefox and Safari . . . maybe it's something to do with SharePoint in combination with browsers other than IE?
Toggle Defaults - Broken Arrows
The other thing that's frustrating is that the arrows don't "stay put." Say that all sections are displayed so all arrows are down-facing. Then say I hide the first section and that header arrow goes right-facing, that's expected/correct. But then if I hide a different section, the first section's arrow will revert back to down-facing even though its section is still hidden and I haven't touched that arrow.
Basically toggling any one section will revert every toggle back to its default value. Even though "Don't run remaining rules if the condition of this rule is met" is checked for all of the buttons' rules. In the InfoPath Preview this incorrect behavior doesn't occur, but it does occur in all three tested browsers IE, Firefox, and Safari. All this work and it ends up looking sloppy/buggy anyway . . .
Khan, Suhaib. "Toggle section from within InfoPath form." SharePoint Minds. 28 Jul 2012. Web. 9 Oct 2014. http://isharepoint2010.blogspot.com/2012/07/step-for-creating-form-add-new-field.html.
