Accordion

Accordion

Accordion:

An interactive accordion is a popular UI element in web design and development, featuring vertically stacked collapsible panels. Each panel has a clickable title or header that expands to show additional content. This design allows users to efficiently navigate information, accessing only the sections they need while keeping the interface neat and organized.

Here is a short video on how an Accordion works: 



How to create an Accordion:

To create an accordion, follow these steps:
  1. Click on the "Create" button located in the accordion section.

  2. You will be redirected to the page mentioned below, where you can start building your accordion.
                   




Once the form is open, you'll find the following fields to fill out:



Accordion Interactive Title: Input a title or name for the interactive accordion.

Section Header: Enter a title for each section, which can be expanded or collapsed by users.

Section Body: Input content to be displayed when the section is expanded.

Add Section for Accordion

  1. The Accordion form has collapsible sections. To add a new section, click 'Add Section' and a '+' icon will appear on the section line stating 'Add Section' below. Refer to the images.
  2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
  3. To delete a section, click the 'Delete' icon on the Section Line and confirm the deletion by selecting 'Remove.'

NotesPlease Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customize Options

Customization options allow for users to personalize and adjust visual aspects like fonts, colors, styles, and spacing to fit preferences or branding. They improve appearance and usability to meet user requirements, with options for Section Headers, Borders, and Icons provided.
Section Header: Users can customize section header appearance by modifying: 1. Font Family, 
                                                                                                                                               2. Font Style,
                                                                                                                                               3. Font Size,                                                                                                                                                                           4. Font Weight,
                                                                                                                                               5. Alignment,
                                                                                                                                               6. Margin (px),
                                                                                                                                               7. Font Color,
                                                                                                                                               8. Background Color.











These options provide flexibility to create visually appealing and well-organized section headers that suit the overall design and readability of the content.

     

Border: 
1. A border outlines and separates content, adding structure and enhancing appearance.

2. You can customize its color and thickness and choose from different border styles. The border radius allows for rounded edges.
Icon: Icons represent dropdown interfaces with two types: Arrows and Plus/Minus radio buttons


Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.


THANK YOU!



    • Related Articles

    • Loree Interactives

      Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging ...

    • Release notes for Loree A2104.5

      Loree Sub-account management for Roles and Features When Loree was installed using Sub-account and not the root account we were not able to map Loree roles to canvas roles as the feature was not available. We have updated this at the backend, Now ...

    • Release notes for Loree A2502.3.2

      Published on: 25/07/2025 Feature Enhancements Customize Your MCQ Options Like Never Before We are excited to introduce a new “Options” accordion in the Customize section of the MCQ interactive editor. With this enhancement, users now have greater ...

    • Release notes for Loree A2201.1

      Loree Fetching all Loree roles When we install Loree on clients instances we create designer and teacher roles as default under Loree role. But due to the pagination issue in the dynamo DB/ query, it is fetching either teacher's role or designer's ...

    • Release notes for Loree - Canvas A2202.5

      Loree Issues While Updating External Link to Text As a Loree usaer, When we click on any text in the editor we get text editing options. When we try to link the text with an external link we get a window where we can type the link. But as soon as we ...