MyListing Accordionize It
The {CODICTS} MyListing Accordionize It plugin adds collapsible accordion functionality to three areas of your MyListing-powered site: content blocks on single listing pages, form sections and fields on the add/edit listing page, and checkbox filter groups on the explore page. Tidy up long content and complex forms by letting users expand and collapse sections as needed.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
Once activated, navigate to “Accordionize It” in the WordPress admin sidebar to configure options.
Key Features
| Feature | Description |
|---|---|
| Content Block Accordions | Make any content block on a single listing page collapsible by adding a CSS class — no settings needed. |
| Video Block Accordions | Video blocks are also supported with proper aspect ratio preservation. |
| Form Section Accordions | Collapse entire form sections (headings) on the add/edit listing page. |
| Form Field Accordions | Collapse individual form fields on the add/edit listing page. |
| Explore Page Checkbox Accordions | Collapse checkbox filter groups on the explore/search page for a cleaner filter layout. |
| Default Toggle State | Configure whether each accordion starts expanded or collapsed. |
| Per-Listing-Type Configuration | Set up different accordion rules for each listing type independently. |
Three Types of Accordions
The plugin provides three distinct accordion features, each configured differently:
1. Content Block Accordions (Single Listing Pages)
Transform any content block on a single listing page into a collapsible accordion by adding a CSS class directly in the MyListing listing type editor. No settings page configuration needed.
| CSS Class | Purpose |
|---|---|
codicts-accordion | Add this to any content block to make it collapsible. The block starts collapsed by default. |
codicts-accordion accordion-is-open | Add both classes to make the block collapsible but start expanded by default. |
How to add the class:
1. Go to Listing Types in the WordPress admin and edit the listing type.
2. Find the content block you want to accordionize in the Single Page tab.
3. In the content block’s settings, enter codicts-accordion (or codicts-accordion accordion-is-open) in the CSS class field.
4. Save the listing type.
This works with both content blocks and video blocks. Video blocks automatically preserve their 16:9 aspect ratio when collapsed and expanded.
2. Form Section & Field Accordions (Add/Edit Listing Page)
Collapse form sections and individual fields on the add/edit listing form, helping users focus on one area at a time without being overwhelmed by a long form.
This feature is configured from the plugin settings page (see Setting Up Form Accordions below).
3. Explore Page Checkbox Accordions
Collapse checkbox filter groups on the explore page into accordions, so users see a tidier filter sidebar and can expand only the filter groups they need.
This feature is enabled with a single checkbox in the plugin settings.
Settings
Navigate to “Accordionize It” in the WordPress admin sidebar.
The settings page has three sections:
Content Block Accordions — Usage Instructions
This section documents the CSS classes for reference. No settings to configure here — content block accordions are activated by adding CSS classes directly in the listing type editor (see above).
Explore Page Checkbox Toggle
| Setting | Description | Default |
|---|---|---|
| Enable Accordion On Explore Page Checkboxes | When checked, checkbox filter groups on the explore page are transformed into collapsible accordions. Each filter label becomes a clickable toggle. | Off |
When enabled, if a checkbox filter group has no available options, the accordion displays “No available options” inside the collapsed panel.
Listing Type Accordion Rules
For each listing type, you can enable accordion functionality and create rules for which form sections or fields should be collapsible on the add/edit listing page.
Setting Up Form Accordions
1. On the settings page, find the listing type you want to configure.
2. Check “Enabled?” to activate accordion functionality for that listing type.
3. Click “Add an Accordion” to create a new accordion rule.
4. Select the target from the “Form Heading to use” dropdown:
The dropdown lists all form headings (sections) and individual fields from the listing type. Select which one should become a collapsible accordion.
5. Choose the “Default Toggle” state:
| Option | Behavior |
|---|---|
| Collapse | The accordion starts collapsed — the user must click to expand it. |
| Expand | The accordion starts expanded — the user can click to collapse it. |
6. Add more accordion rules as needed by clicking “Add an Accordion” again.
7. Click “Save Changes”.
You can configure different rules for each listing type independently.
⚠️ Important — Required Fields: Fields you want to accordionize must NOT be set as required in the listing type editor. HTML5 form validation prevents form submission if a required field is hidden inside a collapsed accordion, because the browser cannot focus on it. Make the field optional before accordionizing it.
Example Configuration
For a “Restaurants” listing type with a long add-listing form, you might set up:
| Target | Type | Default Toggle | Effect |
|---|---|---|---|
| General | Form section | Expand | The main section starts open so users see essential fields first. |
| Menu & Pricing | Form section | Collapse | This section is collapsed until the user is ready to add menu items. |
| Opening Hours | Form section | Collapse | This section is collapsed to reduce form length. |
| Social Links | Form section | Collapse | Optional fields stay out of the way unless needed. |
Users see a much shorter initial form and can expand each section as they’re ready to fill it in.
Frequently Asked Questions
How do I accordionize a content block on a single listing page?
In the MyListing listing type editor, add the CSS class codicts-accordion to the content block. To have it start expanded, use codicts-accordion accordion-is-open. No settings page configuration is needed for this feature.
How do I accordionize form fields on the add listing page?
Go to Accordionize It in the admin sidebar, enable the relevant listing type, click “Add an Accordion,” select the form section or field from the dropdown, choose the default toggle state, and save.
Why can’t I accordionize a required field?
HTML5 form validation requires that required fields be visible and focusable. If a required field is inside a collapsed accordion, the browser blocks form submission. Make the field optional in the listing type editor before accordionizing it.
Does the explore page feature work with all filter types?
No. It specifically targets checkbox filters on the explore page. Other filter types (dropdowns, text inputs, etc.) are not affected.
What happens if a checkbox filter group has no options?
The accordion displays “No available options” inside the collapsed panel.
Can I have different accordion rules for different listing types?
Yes. The settings page shows each listing type individually. You can enable/disable accordions and configure different rules per listing type.
Which field types can be accordionized on the add listing form?
All standard field types are supported including text, textarea, rich text editor, select, term-select, date, email, number, URL, password, related-listing, file upload, work hours, and more. The only excluded type is form-wizard (step dividers cannot be accordionized).
Do content block accordions and form accordions work differently?
Yes. Content block accordions are activated by adding CSS classes in the listing type editor — no settings page needed. Form accordions are configured through the plugin’s settings page with a per-listing-type repeater interface. Explore page accordions are a single on/off toggle in settings.
Where is the settings page?
WordPress Admin Sidebar → Accordionize It (top-level menu with the CoDicts icon).
Troubleshooting
Content Block Not Collapsing on Single Listing Page
| Cause | Solution |
|---|---|
| CSS class not added | Edit the listing type, find the content block in the Single Page tab, and add codicts-accordion in the CSS class field. |
| Typo in class name | The class must be exactly codicts-accordion (with a hyphen, not underscore). For the open state, add accordion-is-open as a separate class. |
| Plugin not activated | Verify the plugin is active in Plugins → Installed Plugins. |
| JavaScript error | Check the browser console (F12 → Console) for errors that might prevent the accordion script from running. |
Form Sections Not Collapsing on Add Listing Page
| Cause | Solution |
|---|---|
| Listing type not enabled | Go to the settings page and check “Enabled?” for the relevant listing type. |
| No accordion rules configured | Click “Add an Accordion” and select the form section or field you want to accordionize. |
| Wrong field selected | Make sure you selected the correct form heading or field from the dropdown. Form headings target entire sections; individual fields target just that field. |
Form Submission Blocked When Accordion Is Collapsed
| Cause | Solution |
|---|---|
| Required field inside a collapsed accordion | This is an HTML5 form validation restriction. The browser cannot focus on a hidden required field. Go to the listing type editor and make the field not required, then save. |
Explore Page Filter Accordions Not Appearing
| Cause | Solution |
|---|---|
| Feature not enabled | Go to the settings page and check “Enable Accordion On Explore Page Checkboxes.” |
| No checkbox filters on the page | This feature only targets checkbox filter groups. If your explore page only has dropdown or text filters, no accordions will appear. |
“MyListing Theme Not Detected” Error
The MyListing theme must be installed and active. Go to Appearance → Themes to verify.
For further support, visit codicts.com or contact us at support@codicts.com.