Skip to main content

Create an expandable list

This page applies to:MindTouch Responsive

This article will demonstrate how to create a definition list that allows readers to expand and collapse items as needed.
 

How to create an expandable 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:

Step 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 the Definition list icon.

Screenshot of the definition list icon in the editor

  1. Place your cursor at the end of the list item and hit Enter.
  2. Type the text that is to be hidden when the list is collapsed. For additional lines underneath the list item, hit Shift+Enter.
  3. Hit Enter to start a new list item and repeat steps 2 through 6.

Step 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.

Step 3: Add JavaScript to your page

  1. Add the following JavaScript code to your page:
$(function() {
    $('.NEW_CLASS').find('dt').on('click', function() {
        $(this).next().toggle('350');   
     });
});
  1. If applicable, replace NEW_CLASS with your custom class name.

Step 4: Add CSS to your page 

  1. Add the following CSS code to your article: 
.NEW_CLASS dt {
    color: #b22222;
    cursor: pointer;
}
.NEW_CLASS dd {
    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. 

Step 5: Save your page 

In the editor toolbar, click Save.  

Step 6: Verify your list works 

Verify your list items expand when clicked.
 

Demo


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.