Create an accordion text module

Shorten page length and create dynamic text by creating an accordion module

Anna Brogan avatar
Written by Anna Brogan
Updated over a week ago

If you have a list of FAQs, steps, or any other text that you'd like to have expand and collapse, you can create accordion text modules on any content in uConnect with a text editor tab. 

Note: Creating accordion text modules is a slightly more advanced undertaking. But we'll walk you through it step-by-step here! 

  1. Find the Community, resource, page, or other piece of content you wish to add the accordion module to. In order to add the module, that piece of content must have the text editor tab. Normally when you edit your content on uConnect, you do so in the 'Visual' tab. In order to create the accordion module, you'll need to switch over to the 'Text' tab. Here's what it looks like: 

2. Below is code you'll copy and paste into the Text tab. The CAPS LOCK text is the text you'll edit. Otherwise, don't make any changes or the module will break. It may be easier to copy and paste the below text into a regular Word or Google document, make the changes to the CAPS LOCK text in the document, and then copy and paste the full new code over into your Text editor. Note that your text doesn't need to remain CAPS LOCK - this is just to distinguish the editable items for you. Alternatively, if you'd prefer, you can edit the tab titles and tab text right in the Text editor. 

<ul class="collapsible">
<div class="collapsible-header"><strong>TAB 1 TITLE</strong></div>
<div class="collapsible-body">TAB 1 BODY</div>
<div class="collapsible-header"><strong>TAB 2 TITLE</strong></div>
<div class="collapsible-body">TAB 2 BODY</div>
<div class="collapsible-header"><strong>TAB 3 TITLE</strong></div>
<div class="collapsible-body">TAB 3 BODY</div>

3. Make sure to save your changes, and then check it out on the front-end! You'll be able to see the accordion module up and running. 

If you want to create more than 3 tabs, no problem! You can have as many as you'd like. Just add this code to the bottom of your existing code, above the last </ul> tag to add another tab:

<div class="collapsible-header"><strong>TAB TITLE</strong></div>
<div class="collapsible-body">ADDITIONAL TAB BODY</div>

If you would like to add a bulleted list within your accordion text module, you can create that within the Text tab, as well. Copy the below bullet and paste it into the text tab, within the CAPS LOCK sections, as needed!

Below is a video tutorial. If you have any questions or need assistance, submit a support request.

Did this answer your question?