Modal Dropdown

UPDATED on June 27, 2018

Summary: the Modal Dropdown snippet provides an easy way to add an accordian-style list of items that drop down on click, then disappear when another item is clicked, without having to write html code from scratch. Modal dropdowns are especially useful for FAQ lists. Once placed on a page, the modal dropdown becomes part of the page's content.

Examples of Modal Dropdown

Accessing Modal Dropdown Snippet

  • Login to OU Campus and check out page.
  • Click green edit button to enter editable region.
  • Click 'Show Gadgets' icon at top right of page.
  • *Click 'Snippets' drop down to display available snippets. Sort by 'all', or by 'Table Transforms'.
  • Select Modal Dropdown snippet.

How to add a Modal Dropdown

  • In edit mode, place your cursor on your page where you want to insert a column layout
  • Click 'Show Gadgets' icon at top right of page.
  • Click 'Snippets' drop down to display available snippets. Sort by 'all', or by 'Table Transforms'.
  • Select Modal Dropdown snippet.
  • Dialog box showing layout for selected snippet will appear. Click 'insert'.
  • Modal dropdown will be placed on your page.
  • Replace placeholder (lorem ipsum) content with your own content.
  • Save and submit for publish.

Add or Delete Rows in a Modal Dropdown

Add a row

  • Right click in the last row and select 'Row/Insert Row After'.
  • A new row will be inserted. Add your own modal dropdown content.

Delete a row

  • Right click in the row to be deleted and select 'Row/Delete Row'.
  • Row will be deleted.

Adding additional Snippets inside a Modal Dropdown

Additional layout snippets may be added inside modal dropdowns, including column layouts, link lists, etcetera. Simply place your cursor inside the modal dropdown content area, add the desired snippet, and populate it with your own content.

Example of Unmodified Modal Dropdown