Skip to main content

Create an expandable list

This page applies to:MindTouch Responsive

Leverage a definition list that expands and collapses to present lists of information that are easy to navigate for your users. Follow these steps to add a custom class, add JavaScript and CSS and to add your definition list:

  1. Open the page in Edit mode.
  2. In the editor, click the View drop-down menu to select Source mode. 
  3. Look for your definition list <dl> element.
  4. Add a class to the <dl> element. 
<dl class="NEW_CLASS"> 

Replace NEW_CLASS with a meaningful class name of your choice.


  1. Add the following JavaScript to your article:
$(function() {
    $('.NEW_CLASS').find('dt').on('click', function() {


  1. Add the following CSS to your article: 
    color: #921b1d;
    cursor: pointer;
    display: none;

 Replace the color value #921b1d, with any color of  your choosing.  


  1. Click Save.
  2. Re-open your page in Edit mode and highlight the text to which to apply the drop-down effect.
  3. In the editor, click the Definition list icon.

  1. Click Save.
  2. Now, when you click on the text, the definition is displayed underneath. To collapse the text, simply click the text again.

The JavaScript and CSS code must be placed BEFORE the list in order for the list to work.



Click the text below to expand the definition list:

How does this expand list work?
When you click on a title, then you'll be able to see the contents under the title.
Will this apply across the 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, then add 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.