Making an Accordion in OU Campus

Follow these directions to make an accordion in OU Campus:

  1. From an editable region on the page, click the insert snippet button on the edit toolbar.

    An image of OU Campus.

  2. The snippets window is displayed. Select accordion, then click insert.

    An image of OU Campus.

  3. The accordion is inserted in the selected editable region.

    An image of OU Campus.

  4. Enter your desired header into the field on the left side, under Title. This is what you will click on to reveal the content underneath.

    An image of OU Campus.

  5. Enter the content you want to see when you click on the header, in the Content box.

    An image of OU Campus.

  6. To create another row, right click where you want to insert it, and hover over the Row option.

    An image of OU Campus.

  7. Once the row options pop up, select your choice of Insert Row Before or Insert Row After, depending on what you need.

    You can also move your cursor to the last box and press tab to add a new row.

  8. To delete a row, right click on the row you want to delete, and hover over the Row option, then select Delete Row.

    An image of OU Campus.

  9. Often when entering content into the accordion, it will add a space before, so just check to make sure it hasn’t done that.

    An image of OU Campus.An image of OU Campus.

  10. If you want the first bar of your accordion to automatically open, you can type “Yes” into the Customization box at the top.

    An image of OU Campus.

    Once saved, it will look like this, with the first item of content open as default.

    An image of OU Campus.

  11. When you are finished, click the save button on the toolbar.

    An image of OU Campus.

  12. Now, the headers can be clicked on to reveal their content.

    An image of OU Campus.