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 Accordion Works:
How to create an Accordion:To create an accordion, follow these steps:
|
Once the form is open, you'll find the following fields to fill out: Accordion Title: Input a title or name for the interactive accordion. Header Title: Enter a title for each section, which can be expanded or collapsed by users. Body: Input content to be displayed when the section is expanded. |
Add Section for Accordion
- 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.
- After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
- To delete a section, click the 'Delete' icon on the Section Line, confirm the deletion, by selecting 'Remove'.
Please 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 Font Family, Font Style, Font Size, Font Weight, Alignment, Margin (px), Font Color, 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: A border outlines and separates content, adding structure and enhancing appearance. You can customize its color and thickness, and choose from different border styles. The border radius allows for rounded edges. |
Icon: Icons represent dropdown interface 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 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 ...Release Notes for Loree A2403.2
Published On: 29/07/2024 Feature Enhancements 1. Extra Canvas Tags Support Previously, users of Loree encountered difficulties when key components such as summaries and details vanished from pages because of unsupported tags. We have now enhanced ...