Skip to main content
MindTouch Success Center

Expandable definition list

Leverage a definition list to present condense long lists of information that are easy to navigate for your users. Follow these steps below create an expandable list on your pages:

Part 1: Add your list items

  1. Open your page in Edit mode.
  2. Type the text of your list item (the line that will always be visible).
  3.  With your cursor, highlight the list item.
  4. In the editor, click Elements > Definition list.
  5. Place your cursor at the end of the list item and hit Enter.
  6. Type the text that is to be hidden when the list is collapsed. For additional lines underneath the list item, hit Shift+Enter.
  7. Hit Enter to start a new list item and repeat steps 2 through 6.

Part 2: Add a custom class to your list items

  1. On the editor toolbar, click the View drop-down menu and select Source mode. 
  2. Look for your definition list <dl> elements.
  3. Add a class to each of the <dl> elements in your list as in the example below.
<dl class="NEW_CLASS"> 
  1. (Optional) Replace NEW_CLASS with a custom class name of your choice.

Part 3: Add JavaScript and CSS to your page

  1. Add the following JavaScript code to your page:
$(function() {
    $('.NEW_CLASS').find('dt').on('click', function() {
  1. If applicable, replace NEW_CLASS with your custom class name.
  2. Add the following CSS code to your article: 
    color: #b22222;
    cursor: pointer;
    display: none;
  1. If applicable, replace NEW_CLASS with your custom class name. 
  2. Replace the color value #b22222, with any color of your choosing. 

Part 4: Save and test your list 

In the editor toolbar, click Save. Verify your list items expand when clicked.


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 contents "hidden" underneath.
► Will this apply across my whole site or only in one section?
If you add the JavaScript and CSS to your header, the expandable list will be accessible for all of your articles. If you want to isolate it to a single article, add the code to just that article.
► Do I have to use definition lists?
No, you can use a bulleted list or even sections with div wrappers. 
  • Was this article helpful?