Element: Collapsible Headings
This element is best used for information that could overwhelm users if displayed fully on a web page, but is still important to include. These are also a great option when information only applies to a subset of the main user group. Text in these sections still impacts SEO and can be helpful to users.
You must follow accessibility guidelines and use correct heading level order. The most common way to use collapsible headings is in a full-width row, but there is an option to apply them to a column if you have a need for two sections to be side by side.
Instruction Details for Full-Width Row
- Open the dropdown menu next to Add Page Content Row [Advanced].
- Select the option to Add Collapsible Headings.
- Choose Background Color (optional)
- Choose the Heading Level. Note: you must still follow the accessibility guidelines in choosing the heading level (H2 being used at top level with H3 for subheadings)
- Add heading text
- Add collapsible content
- Add another collapsible heading to the same group
Example 1
First Heading
This is the first collapsible heading in this section
Second Heading
This is the second collapsible heading in this section.
Example 2
Bobcats
The bobcat (Lynx rufus) is a species that is native to Ohio, and one of seven wild cat species found in North America. Domestic cats belong to the same family, Felidae, as the bobcat. Prior to settlement, bobcats were common throughout Ohio but were extirpated from the state by 1850. They began to repopulate Ohio in the Mid-1900s, and sightings became more frequent in the early 2000s. A combination of monitoring and research has revealed that Ohio now supports an established bobcat population in the eastern and southern parts of the state, and the population is continuing to expand into other areas of suitable habitat.
Description
Bobcats are a small wildcat and are generally around twice the size of an average housecat, although size can vary: adults weigh between 9 and 40 lbs, and males are larger than females. The bobcat has short, dense, soft fur. Their coat color varies to include light gray, yellowish brown, buff, brown, and reddish brown with black spots on the upper parts of the body. The bobcat's tail is short, or “bobbed”, relative to its body length, and has a black band on the upper side of the end of the tail.
Habitat
Bobcats are adaptable to a wide range of ecosystems, if there is adequate prey and cover available. Throughout their range, bobcats are found in conifer and hardwood forests, deserts, swamps, and brushy fields. Cover provided by dense ground vegetation or topography (rock walls, etc.) is important for bobcats to be able to effectively hunt and can also provide protected resting and den sites.
(Source)
Instruction Details for Side by Side Columns
- Add Page Content Row [Advanced]
- Choose Row Background Color
--If adding collapsible headings to columns, you must use the Row Background Color option so that it will display correctly.
- Change the column width (generally 50%)
- Open the dropdown menu next to Add Content Block
- Select the option to Add Collapsible Headings.
- Choose the Heading Level. Note: you must still follow the accessibility guidelines in choosing the heading level (H2 being used at top level with H3 for subheadings)
- Add heading text
- Add collapsible content
- Add another collapsible heading to the same group (if needed)
- Add a second column to the row and repeat steps 3-9
Example Side-by-Side
First Heading
This is content in a 50% wide column.
Second Heading
This is content in the second 50%-wide column.
Temporary Test 1
content
Temporary Test 2
content
Temporary Test 3
content