Accordions Block
Whether you’re crafting a website, blog post, or digital publication, this block empowers you to organize and display information in an engaging, space-efficient manner. Seamlessly create collapsible sections that hide or reveal content with a simple click, offering your readers a more interactive and streamlined reading experience. Organized design with the Accordion Block in Gutenberg, the ultimate tool for enhancing user engagement and delivering content with style.
The plugin is developed externally and more information can be found at https://wordpress.org/plugins/accordion-blocks/.
Table of Contents
Example
Accordion Example 1 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum, justo vel tempor feugiat, ante lectus hendrerit felis, eget laoreet augue ex ut elit. Fusce eleifend hendrerit justo, quis tristique enim laoreet eu. Vivamus eu quam nec turpis varius tempus. Praesent vitae nisi non justo aliquam feugiat vel a orci. Suspendisse potenti. Sed suscipit dolor eu libero luctus, sit amet gravida libero dignissim. Curabitur aliquam mi ac lectus bibendum, sit amet varius elit luctus. Integer et massa nec tortor auctor fringilla.
Aenean ac nunc non libero laoreet laoreet. Vestibulum eget tincidunt metus. Proin euismod tortor vitae turpis rhoncus, at finibus ex ullamcorper. Etiam non orci vitae nunc eleifend malesuada. Nunc sed libero in arcu facilisis tempus. Fusce id interdum arcu, ut hendrerit tortor. Sed auctor ultricies risus, ut fringilla tortor feugiat at. Nulla facilisi. Sed sed dolor non mi bibendum pharetra. Integer vehicula arcu eget eros viverra, nec malesuada justo malesuada.
Accordion Example 2 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum, justo vel tempor feugiat, ante lectus hendrerit felis, eget laoreet augue ex ut elit. Fusce eleifend hendrerit justo, quis tristique enim laoreet eu. Vivamus eu quam nec turpis varius tempus. Praesent vitae nisi non justo aliquam feugiat vel a orci. Suspendisse potenti. Sed suscipit dolor eu libero luctus, sit amet gravida libero dignissim. Curabitur aliquam mi ac lectus bibendum, sit amet varius elit luctus. Integer et massa nec tortor auctor fringilla.
Aenean ac nunc non libero laoreet laoreet. Vestibulum eget tincidunt metus. Proin euismod tortor vitae turpis rhoncus, at finibus ex ullamcorper. Etiam non orci vitae nunc eleifend malesuada. Nunc sed libero in arcu facilisis tempus. Fusce id interdum arcu, ut hendrerit tortor. Sed auctor ultricies risus, ut fringilla tortor feugiat at. Nulla facilisi. Sed sed dolor non mi bibendum pharetra. Integer vehicula arcu eget eros viverra, nec malesuada justo malesuada.
Settings
Styles
The Accordions block comes with 3 pre-defined block styles, ‘Default’, ‘Boxed’, and ‘Green Gradient’. You can find them in the block settings, under ‘Styles’.
Default
Boxed
UBC Brand Style
Open By Default
By enabling this setting, the accordion item will be closed when the page loads.
Click To Close
By disabling this setting, Once the accordion item is opened, it cannot be closed by clicking the title.
Auto Close
This accordion item will remain open when opening another item.
Scroll To Accordion Item
The page will not scroll when opening accordion items.
Mobile Friendly
The Accordion Item block is mobile friendly.
Accessibility
The Accordion Items Block, by default, conforms with WCAG 2.1 AA Guidelines, ensuring that all users can navigate and interact with its content easily and effectively. Please ensure the content you put into your accordions also conforms with the same standards.
Code
The Accordions Block is publically available on the WordPress plugin repository.
How to use the block on UBC CMS?
Navigate to your site’s Dashboard on UBC CMS and go to Plugins. Search for Accordion Blocks and activate the plugin. proceed to the specific post or page you wish to edit. Click the + button located in the top-left corner or in the desired location on the page to add a block. Finally, search for Accordion Item to insert it into your content.