Lightweight Accordion vs OffCanvas / Drawer – Responsive Slide-In Drawer & Popup System

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

OffCanvas / Drawer is a flexible, highly customizable, and lightweight WordPress Gutenberg block that lets you design slide-in drawers, off-canvas navigation menus, and popup panels that slide in from any direction: left, right, top, or bottom. Perfect for mobile navigation menus, WooCommerce shopping cart sidebars, newsletters, exit-intent popups, slide-out contact forms, site announcements, and help desks — all without writing a single line of code. Built natively for the WordPress Block Editor, it supports InnerBlocks, meaning you can place any other Gutenberg blocks (paragraphs, images, forms, custom widgets) directly inside the OffCanvas drawer. It also features a custom shortcode generator allowing you to save layouts and embed them anywhere on your site using the [offcanvas-block id="POST_ID"] shortcode. The plugin is fully responsive, SEO-friendly, performance-optimized, and built to integrate seamlessly with any WordPress theme. Key Features Native Gutenberg Block: Full visual integration inside the WordPress Block Editor. InnerBlocks Supported: Drop any block inside the drawer, including forms, menus, widgets, and shortcodes. Shortcode Generator: Save and reuse your OffCanvas templates anywhere via copy-to-clipboard shortcodes. 4-Direction Slide-Ins: Position drawers on the Left, Right, Top, or Bottom of the viewport. Smart Auto Triggers: Trigger popups based on user behavior (time delay, scroll depth, exit-intent, inactivity, and selector in-view). Responsive Layouts: Set device-specific positions, slide directions, and dimensions for desktop, tablet, and mobile devices. Touch & Swipe Gestures: Smooth, native-feeling mobile interactions with swipe-to-open and swipe-to-close capabilities. Custom Positioned FAB: Floating Action Button triggers with precise offset controls and drag-and-drop editor positionin Free Features Core Layout & Spacing Four Direction Placements: Position the offcanvas panel at the Left, Right, Top, or Bottom edge of the screen. Default Trigger Button: Use the built-in trigger button to toggle the panel open and closed. Body Scroll Lock: Prevent background body scrolling when the OffCanvas panel is active. Standard Backdrop Toggle: Enable a dark overlay backdrop behind the active panel. Trigger Button Customization Block Alignment: Left, Center, or Right alignments for block-level buttons. Typography Controls: Adjust font size, font family, and font weight. Colors & Typography: Full customization of button text color and background color. Ripple Click Effect: Optional ripple animation effect on clicking the trigger. Margin Controls: Fine-tune trigger button outer margins. Close Button Customization Flexible Color Picker: Pick color and background values for the close icon. Size & Shadow: Adjust the scale (px) and shadow styling of the close button. Predefined Placements: Place the close button in the Top-Right, Top-Left, Bottom-Right, or Bottom-Left corners. Header & Typography Editable Drawer Header: Customize the text of the header title. Title Styling: Control title typography (font size, weight) and colors. Header Spacing: Customize the header background color and visibility options. Templates & Shortcodes Shortcode Builder: A dedicated custom post type offcanvas-block lets you create drawers, save them, and copy the shortcode [offcanvas-block id="..."] directly from the admin dashboard list. InnerBlocks Compatibility: Full freedom to place text, images, sliders, newsletters, and third-party plugin blocks inside the drawer. Pro Features Upgrade to OffCanvas Pro to unlock advanced targeting, styling, and behavior controls: Floating Action Button (FAB) Trigger Corner Anchor Placements: Place the trigger as a Floating Action Button in the Bottom-Right, Bottom-Left, Top-Right, or Top-Left corners. Custom Absolute Positioning: Position the FAB anywhere on the screen. Features drag-and-drop editor control with a smart 8px Euclidean threshold to prevent accidental shifts on clicking. Offsets & Layouts: Adjust X and Y offset values to ensure perfect alignments. Visual Effects: Set button size, icon size, borders, border radius, pulse animations, custom shadows, and hover transitions. Rotation Angle: Rotate the FAB to match vertical triggers or layout designs. Smart Auto Triggers & Behavior Exit Intent Detection: Trigger the OffCanvas panel automatically when the user’s cursor leaves the viewport on desktop. After Time Delay: Open the drawer automatically after a configurable delay (in seconds/minutes). Scroll Depth Trigger: Open the panel when a visitor scrolls down a specific percentage (e.g. 50%) of your page. While Target Section in View: Detect when a specific HTML selector (Class or ID) scrolls into the viewport to trigger the drawer. On Inactivity: Display the popup after a period of user inactivity. Trigger Frequency Controls: Limit triggers to show Always, Once per session (sessionStorage), or Once per day (localStorage) to avoid visitor frustration. External Custom Trigger Custom Selectors: Bind the OffCanvas drawer to any custom link, menu item, or button on your page by inputting its Class or ID (e.g. .my-custom-button or #open-drawer-link). Hide Default Trigger: Keep the built-in trigger button hidden when using custom CSS selectors. Advanced Animations & Transitions Premium Transition Types: Slide, Fade, Push, Reveal, Zoom, Flip, and Bounce effects. Configurable Duration: Set exact transition entry and exit duration times in milliseconds (100ms – 5000ms). Easing Presets: Smooth easing animations (ease, ease-in, ease-out, ease-in-out, linear). Responsive Mobile Optimizations Mobile-Specific Placement: Set a different position for mobile screens (e.g., Slide-in Right on desktop, Bottom Sheet on mobile). Mobile Slide Direction: Override the slide-in animation direction specifically for mobile layout visitors. Touch & Swipe Gestures: Smooth swipe-to-open and swipe-to-close touch controls for mobile screens. Premium Design Customization Responsive Dimensions: Customize the panel width and height independently for Desktop, Tablet, and Mobile screens. Advanced Backdrop Blur: Customize backdrop overlay color, transparency opacity, and apply modern CSS backdrop-filter blur effects (0px – 30px). Custom Close Button Icon: Upload or input any custom SVG string to replace the default close button icon. Borders & Hover Spacing: Custom borders, border radius, and hover state box-shadows on trigger buttons.