Skip to main content
MindTouch Success Center

Expandable definition list

Use a a Definition List to create content sections that can expand and collapse.

Part 1: Add your list items with custom class

  1. Open your page in Edit mode and type the text of your list item (the text that will be visible before expanding).
  2. Highlight the list item and select Elements > Definition list from the Editor toolbar.
  3. Place your cursor at the end of the list item and press Enter.
  4. Type the text that should be hidden when the list is collapsed. For additional lines underneath the list item, press Shift+Enter.
  5. Press Enter to start a new list item and repeat steps to create additional list items with collapsible text.
  6. To include a visual indicator of each expandable item, paste in a character at the beginning of each list item (such as ►).
  7. While still in Edit mode, view your page in Source view (select View > Source or click the </>HTML button from the Editor toolbar). 
  8. Find for your Definition List <dl> items and add a class to each of the <dl> elements in your list as in the example below.
    <dl class="EXPAND_COLLAPSE"> 

Part 2: Add JavaScript and CSS to your page

  1. Add the following JavaScript code to your page:
    $(function() {
        $('.EXPAND_COLLAPSE').find('dt').on('click', function() {
            $(this).next().toggle('350');   
         });
    });
    
  2. Add the following CSS code to your page: 
    .EXPAND_COLLAPSE dt {
        color: #4597cb;
        cursor: pointer;
    }
    .NEW_CLASS dd {
        display: none;
    }
  3. Replace the color value #b22222, with your preferred color value.
  4. Click Save and verify your list items expand when clicked.

Example

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 an 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, you can use a bulleted list or even sections with div wrappers. 
  • Was this article helpful?