Lightweight Accordion vs UltraBlocks | Gutenberg Blocks | Page Builder for Gutenberg Editor

Lightweight Accordion plugin for WordPress allows you to add collapse elements to posts using a Gutenberg block or a shortcode (via classic editor). By using the details HTML tag and a few lines of CSS this allows for a javascript-free accordion for minimum page load. Extremely Lightweight (<1kb): Without using Javascript the plugin uses the native details HTML tag and a few lines of code for almost no impact on front-end. Customizable: Options include customizing the HTML tag used for the accordion title, open by default, borders, colors, and accordion grouping (auto-close others when one opens). Shortcode Usage examples Here are a few examples of using the accordion plugin with shortcodes. [lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion] Additionally you can display the accordion open on load with the accordion_open option. [lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion] You can also change the html tag wrapping the title of the accordion using the title_tag option. [lightweight-accordion title="My Accordion" title_tag="h3"]My Content[/lightweight-accordion] If you want to include FAQ schema you can add the schema option and set it to faq. [lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion] If you’d like put a border around the content of the accordion you can use the “bordered” attribute. [lightweight-accordion title="Bordered Content" bordered=true]My Content[/lightweight-accordion] If you want accordions to auto-close when another opens (exclusive accordion), use the “group” attribute with the same value on each accordion. [lightweight-accordion title="Question 1" group="faq"]Answer 1[/lightweight-accordion] [lightweight-accordion title="Question 2" group="faq"]Answer 2[/lightweight-accordion] [lightweight-accordion title="Question 3" group="faq"]Answer 3[/lightweight-accordion] If you’d like to swap the default triangle marker for a chevron or plus/minus icon (optionally on the right side of the title) use the “icon” and “icon_position” attributes. [lightweight-accordion title="My Accordion" icon="chevron" icon_position="right"]My Content[/lightweight-accordion] Shortcode Options Here is the full listing of shortcode options. Additionally all of these options are accessible when using the Gutenberg block. title (Required Default: null) The title of your accordion will be displayed at the top for users to click. A good example would be to include a user’s question so they could click it for more details. content (Required Default: null) Content that will go into your accordion element. title_tag (Default: “span”) This sets the html tag that wraps the title in the accordion summary. Useful if you want to make it a heading tag for SEO purposes. accordion_open (Default: false) Set this to true if you want your accordion to be open by default. bordered (Default: false) Set this to true if you want a border around the accordion content. title_text_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. title_background_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. schema (Default: false) Set this to faq if you’d like FAQ schema to be included. class (Default: false) Used to add a custom class to the parent container of the accordion. anchor (Default: null) Adds the value as an ID to the accordion div as an anchor. autop (Default: true) By default the shortcode will wrap text in a ‘p’ tag. Set this to false if you’d like this disabled for the specific accordion. group (Default: false) Set this to a group name to make accordions with the same group auto-close when another opens. Uses the native HTML details name attribute for zero JavaScript overhead. icon (Default: false) Set this to “chevron”, “plus”, or “none” to replace the default triangle marker. The chevron rotates and the plus becomes a minus when the accordion opens. icon_position (Default: false) Set this to “right” to display the chevron or plus icon on the right side of the accordion title. Additional Details If you’d like to remove the “lightweight-accordion.css” from being enqueued on your site use the filter below. It’s recommend you style the accordion yourself if you use this filter. add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false' ); If you’d like to remove the “lightweight-accordion/editor-styles.css” from being enqueued in the admin area of your site you can use the filter below. add_filter('lightweight_accordion_include_admin_stylesheet', '__return_false' ); If you’d like to remove processing of shortcodes in accordion content you can use this filter. add_filter('lightweight_accordion_process_shortcodes', '__return_false' ); If you’d like to use inline Microdata for FAQ schema you can use this filter. (Not recommended) add_filter('lightweight_accordion_output_microdata', '__return_true' ); If you’d like to force “lightweight-accordion.css” to load on all of your site you can use this filter. By default the plugin will detect if the block or shortcode is used and enqueue the CSS. add_filter('lightweight_accordion_always_include_frontend_stylesheet', '__return_true' ); When a page contains an accordion a tiny inline script is added to the footer that automatically opens accordions targeted by a URL hash (for example a link to an accordion’s anchor). If you’d like to disable this you can use the filter below. add_filter('lightweight_accordion_anchor_script', '__return_false' );

UltraBlocks is a powerful Gutenberg block plugin designed to enhance your WordPress editing experience. With a variety of custom blocks, including container, grid, paragraph, buttons, countdown, shape-divider, google-maps, and more, UltraBlocks allows you to create stunning layouts and designs effortlessly. UltraBlocks is continually evolving, with more exciting features and blocks planned for future updates. Key Features 👉 Premium Gutenberg Blocks: Top-tier blocks plugin designed for optimal performance 👉 Lightning-Fast Assets: Quick-loading icons, fonts, and templates for a smooth experience 👉 Seamless Full Site Editor Integration: Works flawlessly with the WordPress Full Site Editor 👉 Native WordPress Block Interface: Enjoy a familiar and intuitive editing experience 👉 Flexible Container Width: Easily adjust container widths with a draggable interface 👉 Drag-and-Drop Simplicity: Effortlessly arrange and customize your layout with intuitive drag-and-drop controls 👉 Fully Responsive Design: Ensure your site looks great on mobile, desktop, and tablet devices 👉 Accordion Block: Add collapsible content sections to manage extensive information 👉 Buttons Block: Design eye-catching call-to-action buttons to boost user engagement 👉 Container Block: Create and organize content within custom containers for a structured layout 👉 Countdown Block: Feature countdown timers for events or special promotions 👉 Image Comparison Block: Display interactive before-and-after comparisons with ease 👉 Google Maps Block: Integrate maps to highlight key locations directly on your site 👉 Grid Block: Craft responsive grid layouts to showcase content dynamically 👉 Lottie Animation Block: Incorporate interactive and engaging Lottie animations into your design 👉 Paragraph Block: Customize and style text with a variety of formatting options 👉 Search Block: Add search functionality to help users quickly locate the content they need 👉 Shape Divider Block: Add stylish shape dividers to enhance section aesthetics 👉 Tabs Block: Present content in a tabbed format for a clean and organized look Ultra Free Blocks: Effortless Gutenberg Design Tools for Your Site ✅ Accordion Block: Create collapsible sections to manage and display large amounts of content in a compact space. ✅ Buttons Block: Add attractive call-to-action buttons to your pages. ✅ Container Block: Create custom containers to organize your content. ✅ Countdown Block: Display countdown timers for events or promotions. ✅ Image Comparison Block: Enable users to compare two images side by side with an interactive slider, ideal for showcasing before-and-after transformations or highlighting differences. ✅ Google Maps Block: Embed Google Maps to showcase locations. ✅ Grid Block: Build responsive grid layouts for your pages. ✅ Lottie Animation Block: Add engaging and interactive animations to your site with Lottie animations. ✅ Paragraph Block: Style your text with various font options and formatting. ✅ Search Block: Add search functionality to your site, allowing users to easily find the content they’re looking for. ✅ Shape Divider Block: Enhance your sections with decorative shape dividers. ✅ Tabs Block: Organize content into tabs for a cleaner presentation. Credits UltraBlocks is developed and maintained by [https://ultrablocks.pro/contact]. Support For support or inquiries, please contact [https://ultrablocks.pro/contact]. Like UltraBlocks? If you find UltraBlocks useful, please consider leaving a positive review and rating on WordPress.org. Your feedback is greatly appreciated!