Skip to main content

Create an expandable definition list (MT4)

This page applies to:MindTouch 4


Leverage a definition list that expands and collapses to present lists of information that are easy to navigate for your users. 


Add a class

Add a class to the <dl> element. 

<dl class="NEW_CLASS"> 

Add javascript and CSS

Add the following JavaScript and CSS to your article:

$(function() {
    $('.NEW_CLASS').find('dt').on('click', function() {
    color: blue;
    cursor: pointer;
    display: none;

Add a definition list

Open the page in Edit mode, highlight the text to which to apply the drop-down effect, and click the Definition List icon in the Editor:

Once the page is saved, the highlighted text will appear blue. Now, when you click on the text, the definition is displayed underneath. To collapse the text, simply click the text again.


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, then it will be accessible for all of your articles. If you want to isolate it to a single article then add it just to 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?