Toggle List Items

Create the Component

Toggle List Item components are pretty simple, with just a few fields to fill in.

1. Name: enter a name for your component here. (This field does not display anywhere on your website, but is used to organize files within Tridion.)
2. Schema: select Toggle List Item
3. Title: enter the title or headline of your content here. To see where this field displays on a page, please refer to the Component Template options as the display varies depending on the component template you select.
4. Short Name: enter a very short version of your title, as this is what appears in the tab on a Tab page. Since this field is only used on a Tab page, so you do not need to complete this field if you are building a Toggle or Anchor Link page.
5. Body Content: enter the content of your component here. This is a rich-text field. 

When you have filled out the fields as needed, save and close your component.

Component Template: Anchor Links

Create an Anchor Link Page  Sample Anchor Link Page

The Toggle List Item component has three component template options, one of which is Anchor Links. The Anchor Links component template renders content in the following way: 

1. Link and Headline: both the anchor link, at the top of the page, and the headline, which precedes a section of content, are generated from the component's Title field.
2. Body: the main body of content under an anchor link headline is generated by the component's Body Content field.

On an anchor link page, you can insert multiple anchor link components. The link, headline, and body will repeat on the page for each component you insert into the page.

Tip: The anchor link component template must be used with an anchor link page template, as described in the Anchor Link page guide. If you attempt to use the anchor link component template with any other page template, the page will fail to publish. 

Component Template: Tabs

Create a Tab Page  Sample Tab Page

The Toggle List Item component has three component template options, one of which is Tabs. The Tab component template renders content in the following way:

1. Tab name: the name shown inside of the tab is generated from the component's Short Name field.
2. Tab headline: the headline shown at the top of the tab is generated from the component's Title field.
3. Body content: the content under the the tab headline is generated from the component's Body Content field.

Tip: You can insert multiple tabs within a page, but be sure to check and see how they appear when viewed on mobile devices.

Component Template: Toggles

Create a Toggle Page  Sample Toggle Page

The Toggle List Item component has three component template options, one of which is Toggles. The Toggle component template renders content in the following way:

1. Toggle headline: this is generated, with a +/- sign to the left of it, by the component's Title field.
2. Toggle content: this is generated from the component's Body Content field.

Multiple toggles can be added to a page. In the example above, the toggles named Step 1, Step 2, Step 3, etc. are all separate Toggle List Item components. When a Toggle List page loads all toggle list items are collapsed, but they can be expanded to show their content by either clicking on the toggle headline or the +/- sign to the left of the headline.