Lightweight Accordion vs Responsive Blocks – Page Builder for Blocks & Patterns

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' );

Responsive Blocks is a free WordPress Blocks Editor plugin that offers a library of 50+ fully functional native WordPress blocks and 100+ WordPress Website Templates and readymade Patterns. This way, you can create stunning pages in the default WordPress editor without any coding. The settings in the plugin allow easy customization and build stunning pages without adding any extra page builder plugins. Also, the free Block Editor Starter Templates help you build designer content layouts for your website in minutes. Additionally, you can import patterns to incorporate preferred page and section layouts into your existing website. Checkout the Gutenberg blocks demos Key Features of Responsive Blocks Plugin 50+ free WordPress Blocks 100+ ready-to-import WordPress Block Templates 250+ ready-to-use Block Patterns WooCommerce Blocks Cross-Browser Compatible Quick Support 3+ Global Extensions like User Display Conditions, Block Animations, Responsive Conditions, and much more Highlights of Responsive Blocks – WordPress Gutenberg Blocks Plugin 🚀 Flexbox Container Technology: Advanced flexbox container based approach for faster design. 🌐 Simple User Interface: The user interface of each block is easy to use. 🚫 No Coding Knowledge Required: Create fantastic landing pages without a line of code. These blocks are designed for non-coders and coders alike. 📦 Pattern Importer: Using this feature, you can import beautifully designed Gutenberg sections and pages to your site. ⚡ AMP Optimized: These blocks are AMP optimized, considering AMP is one of the most important ranking factors for search engines. 🎨 Easy Customization: The blocks are easy to customize according to your requirements. You can create complex layouts in a very short time. 🛠️ Modular Control: You can quickly turn on or off the block or sections you want to enhance the site’s performance. 📱 Responsiveness: You have direct control over each block’s responsiveness. Its flexible, responsive customization options enable you to create user-friendly websites for all devices efficiently. 🚀 Continuous Updates: Stay ahead with regular updates and new additions to our collection of WordPress Blocks, giving you the best features to enhance your website. 🌐 Trusted Development: Created by the Cyberchimps team, Responsive Blocks plugin delivers top-notch WordPress features. Join our satisfied users and elevate your website-building experience. Professional Designer-made Starter Templates and Ready-to-use WordPress Websites Import professionally designed websites with Responsive Blocks plugin in minutes. With no compromises on performance and zero limits on what you can design, you can cut down your website design time by a whopping 90%. Responsive Blocks plugin integrates seamlessly with the Responsive Starter templates plugin to offer you a library of fully functional, professionally built websites that you can import and launch your website with just a few clicks! Check Ready Websites and Starter Templates 50+ WORDPRESS BLOCKS, EXTENSIONS AND GLOBAL SETTINGS Blocks Container Block: Create easy to use stunning layouts using the Container block, powered by flexbox technology. Advanced Heading: You can have complete control over your headings. Style your typography (Fonts, sizes, spacing, line heights). This block highlights your page headings. You can change the width and position of the separator in the heading. Advanced Text: Display your business message in an eye-catching manner with this Advanced Text block. Info-BlockDesign creative and informative boxes with images, headings, and subheadings. You can now display information about features on your website in elegant info boxes, which is perfect for helping your visitors understand the features of your products and services. Image Boxes: Use the Gutenberg Image Boxes block to build a beautiful gallery of images to highlight your portfolio, photos, and more. Table of Contents: This block allows access to extensive content of the post/page through the contents heading. This makes it easier for visitors to directly go to the specific section on the page or the post. Icon List: Create impressive lists on your website. Design your styled lists. Pick your favorite icons or images to highlight items. Use this to create checklists, feature lists, or any other items on your pages. Shape-Divider: The Shape-Divider Block allows you to create a visually beautiful transition between your content with an optional divider. With one click, you can add shapes like Wavy, Hills, Angled, Sloping, etc. Contact Form 7 styler: This block helps you customize the Contact Form 7 plugin’s form styling, like colors, backgrounds, and typography. Image Block: The Responsive block image block allows you to add nice-looking images to your website with additional design settings. Flip Box: The Flip Box block allows you to create stunning animated content that flips on hover. Use icons and images with additional content on flip boxes’ front and back sides. Image Slider: Create a fully responsive and smooth image slideshow of your products, services, or clients. Image Hotspot: Highlight specific parts of the image with animated pointers to make images more interactive. Accordion Block: This block lets you answer the user’s common queries quickly and attractively. It can also display content such as FAQs or descriptive content. Post Carousel You can embed your popular posts or any category of posts in modern-looking carousels. The system provides an option to select available post types—posts, pages, media, or any CPT you have. Testimonials: Testimonials are customer reviews that can be displayed on the site to add credibility. Testimonial block allows you to display a single testimonial block on your site. Buttons: Easily add multiple buttons within a block. It can add attractive call-to-action buttons within a block with the Gutenberg Buttons block. You can add many buttons to your content using this button block. Call/Mail Button: This block allows you to add a button that automatically makes a call or sends an email. Inline Notice Block: You can highlight important information on your page. WP Search: This block allows you to add the WordPress search field to your page. This will help your users easily find the required information. Team: The Team Block allows you to display team members with a descriptive block. You can display a team with their name, pictures, designation, social links, etc. Anchor Block: Anchor blocks allow you to create internal links to quickly move from one part/block of your page to another. Spacer: This block allows you to add white space between blocks and customize height. Divider: Using the Gutenberg Divider Block, add a divider between your blocks to make them more distinguishable. Tabs: The tabs block allows you to display key information in an interactive manner. It supports custom-made nested tabs designed to attract your users. Blockquote: Easily embed and customize quotes in your posts. You can change quote styles, and various customization options are provided to make your favorite quotes stand out on your blog post. Call-to-Action: Make your marketing pages effective using the stunning designs of the Call-To-Action button block for Gutenberg. This block allows you to add an eye-catching, full-width section with a big title, paragraph text, and a customizable button. Card: Display details, images, and more with the Gutenberg Card block in a lightweight, easy-to-understand layout. This block allows you to add cards to describe your product or service. Expand/Show More: With the Gutenberg Expand More block, show your visitors small snippets of text before showing the entire information. Video Popup: Use the Video Popup block to show a thumbnail that allows your users to view a video in a pop-up window. Embed a YouTube, Vimeo, or self-hosted video and display a thumbnail, which will allow your users to view the video in a pop-up window. Google Map: You can now integrate Google Maps into your Gutenberg editor or anywhere on the website. Customize the block and share your business location on your website. Taxonomy List: The Taxonomy List block allows you to display content categorization anywhere on your page to help your readers navigate to related content. Progress Bar: Showcase any activity’s progress through animated indicators with the Progress Bar block. Post And Page Grid: This block provides options to showcase custom post types anywhere on the page. It provides category controls for choosing categories or tags. Feature Grid: Showcase several features in an impressive layout with this Feature Grid block. Pricing List: With the Gutenberg Pricing List block, you can design a beautiful and comprehensive pricing list for your goods, services, and memberships. You can add names, images, descriptions, and prices for particular menu items. Pricing table: Create impressive pricing tables to compare features and your various membership options. This tool allows you to add item names, images, descriptions, and prices. Instagram Feed: This block allows you to stream Instagram content directly to your WordPress website, thus increasing your odds of getting new followers and clients. Social Icons: Social icons block allows you to add modern social media icons for all popular networks and link them to your brand or personal accounts. Count up: Show animated statistics in a Count Up block. You can display facts and figures attractively with animated counters. The counter will count to your designated number when the page is visited. Countdown: The countdown block allows you to add countdowns to your page with attractive customizable styles. Content Timeline: Use the Gutenberg Content Timeline Block to create visual flowcharts, vertical timelines, and event layouts. Post-Timeline: The Post Timeline block helps you design beautiful and responsive timelines that display your posts or events in an ordered list according to the dates they were published. You can also customize the content for each blog post with a new option to select an icon for the connector. Extensions and Global Settings Display Conditions: The Display Conditions feature gives you the ability to specify when a specific block, section, or element is shown and to whom on your website. Animations: Add life and interactivity with Responsive blocks fade, slide, zoom, flip, and more. Free users get a set of easy-to-apply animations for any block. Responsive Conditions: Control which block is visible on all devices. Hide blocks on mobile and tablet if not necessary. Advanced block presets: Not sure how to design blocks? Our expert designers created high-converting, visually appealing presets ready to use. Custom CSS: Apply custom CSS with Responsive Blocks by selecting the block and adding your code. Compatible with Responsive and other Gutenberg Themes Responsive Blocks plugin is compatible with most of the popular themes available on the WordPress themes repository. Moreover, we have worked extensively to make the integration deeper with our own Cyberchimps Responsive theme. Responsive theme is a fast, lightweight, and fully Gutenberg-compatible theme that loads under 100 KB. It’s free to use and actively installed on more than 30,000 websites, with all the settings you need to build beautiful websites. Reasons to choose the Responsive WordPress Theme ⚡ Blazing Fast Speed: Responsive requires less than 100 KB to load completely with minified assets and optimized database queries. 💯 Fully Customizable Theme: The responsive theme offers all the necessary customization settings to customize your layouts, typographies, and colors. 🔁 Translation Ready: Responsive comes with built-in multilingual support, and you would not require any third-party plugin for translating. Currently, the theme is translated into 45 other languages. 🎉 Integration with Popular Plugins: Responsive theme is 100% compatible with popular plugins like WooCommerce, Mailchimp, WP Legal Pages Pro, and more! Support & Documentation Have any questions? Visit support on Responsive Blocks Plugin Forum. Learn more about using Responsive Blocks plugin with our detailed documentation. Get easy access to Video Tutorials Join our Facebook Group for the latest updates. What’s Next? If you like Responsive Blocks, consider checking out our other WordPress Plugins: Responsive Theme: Responsive Theme is a free WordPress theme built by Cyberchimps that is fast, lightweight, and fully customizable. It loads completely under 100 KB. With a blazing GTMetrix performance score of 100%, it helps your website load super fast, ensuring customers get a better user experience. The theme powers more than 30,000 websites and more than 500+ 5-star ratings on WordPress. Responsive Starter Templates: A free plugin that offers a library of premium Elementor and block templates to launch your website quickly. Just select your favorite website template, click import, and launch your website. Responsive Addons For Elementor: Supercharge your Elementor page-building experience with Responsive Addons for Elementor, the ultimate toolkit for effortlessly creating stunning websites. Elevate your design capabilities and enhance the power of Elementor with our versatile widgets and extensions, giving you the freedom to create exactly what you envision. WPLegalPages: is a popular plugin that helps you generate a professional Privacy Policy, terms of use, terms and conditions, eCommerce returns and refunds policy, affiliate disclaimers, and more. WP Cookie Consent: WP Cookie Notice for GDPR, CCPA & ePrivacy Cons. Future Roadmap Coming Soon Mode Popup Builder Loop Builder Dynamic Content Custom Fonts Advanced Spacing Controls