Expandable definition list

Last updated
Save as PDF

Applies to:: All MindTouch Versions
Role required:: Draft Contributor

Use a definition list to create content sections that can expand and collapse.

Definition lists can help you organize information into easily digestible sections on a page. Expandable lists are an alternative to using bulleted lists or sections with div wrappers. Consider using expandable lists for FAQs, glossaries, or pages where you want users to be able to access more information without using a contextual help window or opening a separate browser tab.

Expandable lists create challenges for users with screen readers. To achieve the same functionality without compromising accessibility, we recommend using a collapsible accordion instead of an expandable list.

Examples

Click the text below to expand the definition list:

► How does this expand list work?: When you click on a list item, you will be able to see the content "hidden" underneath.
► Will this apply across my whole site or only in one section?: Code added to individual pages will only apply on that page. If you add the JavaScript and CSS to your header, the expandable list will be accessible for all of your pages where you apply the custom class to text.
► Do I have to use definition lists?: No, this is just an option, and you can use whatever content organization method you prefer.

Add your content

This is all the text you want to include in your list item(s).

Open your page in Edit mode.
Type the text for the first list item. Users will click this text to expand the item.
1. To include a visual indicator, paste in a character before the text (such as ►).
Highlight the text and select Elements > Definition list from the Editor toolbar.
Place your cursor at the end of the first list item and press Enter.
Type the text that should be hidden when the list is collapsed. To create a line break press Shift+Enter.
Press Enter to start a new list item, and repeat steps 2, 4, and 5 as needed.

Add code to your page

This will ensure that your lists collapse and expand when you click them. You can also set a custom color for your expandable text.

Add HTML

While still in Edit mode, view your page in Source view (select View > </>Source, or click the </>HTML button from the Editor toolbar).
Find your Definition List <dl> items and the class to each of the <dl> elements in your list.
Your HTML should look like this: <dl class="EXPAND_COLLAPSE">

Add JavaScript and CSS

Add the following JavaScript code to your page:

$(function() {
    $('.EXPAND_COLLAPSE').find('dt').on('click', function() {
        $(this).next().toggle('350');   
     });
});

Add the following CSS code to your page:

.EXPAND_COLLAPSE dt {
    color: #4597cb;
    cursor: pointer;
}
.EXPAND_COLLAPSE dd {
    display: none;
}

Replace the color value #4597cb with the color you want your expandable text to be.
After adding all three pieces of code (HTML, JavaScript, and CSS), click Save.
Verify that your list collapses and expands when clicked.