Create Accordions for Your Meetings Microsite Content

When creating your Meeting Microsites in MatrixMaxx, you may find that some of your pages get very long due to have a lot of content. This can make it harder for users to quickly find the information they are looking for.  One solution to this is to use accordions.

Here is an example of what a meeting agenda could look like in accordions:

To create accordions in a MatrixMaxx Microsite, you will need to know a little HTML, but this article will walk you through everything you need to do.

First, you must switch to Source view mode.  To do this, click the button in the upper right of the WYSIWYG editor that says ‘Source’.  You will now be looking at the HTML of your Microsite page.

Next, you will organize your content into an UL list in HTML.  Each accordion will be a LI in the list.  And the content within the accordion will be in a DIV.  Here is the example code you can use to create the accordion.

<ul class="maxx-accordion">
<li>Title of My First Section
<div class="maxx-accordion-content">
Content for my first section. 
</div>
</li>

<li>Title of My Second Section
<div>
Content for my second section. 
</div>
</li>

<li>Title of My Third Section
<div>
Content for my third section. 
</div>
</li>
</ul>

Here is what the above code should look like in your microsite:

When you switch back out of source mode, you will not see your accordion in the WYSIWYG window. It will appear as a list.  However, if you preview your microsite, you will see the accordion.