Xpert Dropdown Info – Expandable Content with Shortcode & Gutenberg Block

Every WordPress site needs expandable content. FAQs, product details, legal disclaimers, documentation, and user guides all take up space. Showing everything at once makes pages look cluttered and overwhelming.

Xpert Dropdown Info solves this. It adds clean, accessible dropdown/accordion boxes that keep your page tidy while hiding extra information until users need it.

What It Does

Xpert Dropdown Info creates click-to-expand content panels. Users click the title, and the content slides down smoothly. Click again, it slides back up.

Two Ways to Add Dropdowns

Four Built-In Styles

Three Icon Modes

Color Controls

How It Works

Method 1: Shortcode

Add this anywhere in your content:

[dropdown_info title="What is this plugin?"]
Xpert Dropdown Info creates expandable content panels. Click the title to toggle.
[/dropdown_info]

Advanced shortcode example:

[dropdown_info 
    title="Shipping Information" 
    style="card" 
    icon="plus" 
    open="true" 
    bg_color="#f5f5f5" 
    text_color="#222222" 
    border_color="#dddddd"]
Delivery takes 3-5 business days. Free shipping on orders over $50.
[/dropdown_info]

Method 2: Gutenberg Block

1. Open any post or page in the block editor

2. Search for “Xpert Dropdown Info” in the block inserter

3. Enter the Title and Content

4. Customize in the sidebar:

   • Style – Minimal, Bordered, Card, Rounded

   • Icon – Arrow, Plus, None

   • Start Open – On/Off toggle

   • Colors – Background, Text, Border

5. Publish or update

Global Settings

Go to Settings → Xpert Dropdown Info to control defaults:

Advanced: Custom CSS Injection

When you enable Custom CSS Support, a textarea appears where you can add your own CSS:

/* Example: Change header background on hover */
.xpert-dropdown-header:hover {
    background-color: #f0f0f1;
}

/* Example: Add a subtle animation */
.xpert-dropdown-content {
    transition: max-height 0.5s ease-in-out;
}

The CSS is injected inline when the plugin stylesheet loads – no extra HTTP requests.

Smart Asset Loading

The plugin only loads assets when needed:

1. ✅ Scans page content for shortcode or block

2. ✅ Enqueues CSS/JS only on matching content

3. ✅ Saves bandwidth and improves performance

4. ✅ Re-initializes dynamically added dropdowns via MutationObserver

No unnecessary files loading on pages without dropdowns.

Accessibility Built-In

• ✅ Keyboard support – Enter and Space keys toggle

• ✅ ARIA attributes – aria-controls and aria-expanded

• ✅ Focus management – Keyboard focus indicators

• ✅ Screen reader ready – Proper labels and roles

Real-World Use Cases

1. FAQ Page

[dropdown_info title="What payment methods do you accept?"]We accept Visa, Mastercard, PayPal, and bank transfers.[/dropdown_info]
[dropdown_info title="What is your return policy?"]30-day money-back guarantee. No questions asked.[/dropdown_info]
[dropdown_info title="How long does shipping take?"]3-5 business days domestically. International shipping available.[/dropdown_info]

2. Product Documentation

[dropdown_info title="Installation Instructions" style="card" icon="plus" open="false"]
Step 1: Upload the plugin zip file.
Step 2: Activate the plugin.
Step 3: Configure settings.
[/dropdown_info]

3. Legal Disclaimers & Policies

[dropdown_info title="Terms & Conditions" style="bordered" icon="plus" open="false"]
By using this website, you agree to our terms and conditions. Full text available below.
[/dropdown_info]

4. User Guides & Tutorials

[dropdown_info title="Getting Started" style="rounded" icon="arrow" open="true"]
Welcome! Here's how to get started with our platform...
[/dropdown_info]

5. Compact Notes & Alerts

[xpert_dropdown_info title="Important Notice" style="card" icon="plus" open="true" bg_color="#fff3cd" text_color="#856404" border_color="#ffc107"]
Our website will be under maintenance on Sunday, 2 AM to 4 AM EST.
[/xpert_dropdown_info]

Performance Features

Requirements

Limitations (Transparent)

Frequently Asked Questions

Can I use this with the classic editor?
Yes, shortcodes work in the classic editor, widgets, and theme templates.

Does it work with page builders?
Shortcodes work in Elementor, Beaver Builder, Divi, and most page builders.

Can I have multiple dropdowns on one page?
Yes, unlimited dropdowns per page.

Is it accessible?
Yes, full keyboard navigation and ARIA attributes.

Can I style it differently per dropdown?
Yes, use the style, bg_color, text_color, and border_color attributes.

Does it work with RTL languages?
Yes, the plugin supports right-to-left languages.

Can I add custom CSS?
Yes, use the Custom CSS textarea in settings.

Will it slow down my site?
No. Assets only load when dropdowns are present on the page.