Перейти к содержимому

Listdom Accordion Skin Documentation

View Demo

Это содержимое пока не доступно на вашем языке.

The Accordion Skin presents directory listings in collapsible panels. Each listing appears as a header; clicking it expands the panel to reveal details without navigating away. You can optionally display a map alongside or above/below the accordion list.

  1. Create a Shortcode: Go to Listdom > Shortcodes and click Add Shortcode. Give it a title.
  2. Select Accordion Skin: In the Skin tab, choose Accordion.
  3. Configure Settings: Adjust the Style, Map, Layout, Sort, Search, and Filter Options tabs.
  4. Publish & Use: Publish the shortcode and embed the [listdom] code in a page. Listings will appear in an accordion format on the front-end.

For a broader shortcode workflow, see the Listdom Shortcodes Overview. For practical examples, see Display Listings with Listdom Shortcodes.

Selecting Accordion in the Skin tab enables the accordion format. No extra fields are required; the skin simply displays each listing as an expandable panel. A warning appears in Listdom Lite noting that Accordion requires Pro.

The Style tab lets you pick a style variation (usually Style 1) and control which elements appear inside each panel.

  • Display Image Pro – Toggle the featured image for each listing. (Default: enabled.)
  • Image Method Pro – Choose Cover (single featured image) or Slider (gallery slider) for the panel image. (Default: Cover.)
  • Image Fit Pro – Set image fit to Cover or Contain.
  • Content – Enable to show listing description text in the expanded panel. (Default: enabled.)
  • Content Length – Limit how many words of the description/excerpt are shown. (Default: 10.)
  • Content Type – Choose Description or Excerpt for the content source. (Default: Excerpt.)
  • Contact Info – Show the listing’s contact details in the panel. (Default: enabled.)
  • Address – Display the listing address if the Map component is active. (Default: enabled.)
  • Work Hours – Show business hours when available. (Default: enabled.)
  • Categories – Display assigned categories. (Default: enabled.)
  • Share Buttons – Include social share icons. (Default: enabled.)
  • Price – Show listing price if pricing is enabled. (Default: enabled.)
  • Title – Toggle the listing title (usually left on). (Default: enabled.)
  • Claim Status Claim – Show a claimed badge for listings claimed by their owners.
  • Labels – Display listing labels such as “Featured”.
  • Favorite Icon Favorite – Let users favorite listings.
  • Compare Icon Compare – Allow users to add listings to a comparison list.
  • Review Stars Reviews – Show average rating stars.

Accordion can optionally include a map displaying all listing locations.

  • Map Provider - Choose the map service (Leaflet/OpenStreetMap or Google Maps).
  • Position - Place the map Top, Bottom, Left, or Right relative to the accordion.
  • Map Style - Apply a custom style when using Google Maps.
  • Map Height - Set a specific height for the map container.
  • Mouse Wheel Zoom - Enable or disable zooming the map via mouse wheel/trackpad scroll. Disabled is the default to prevent accidental zooming while scrolling the page. Toggle to Enabled when you want scroll-to-zoom behavior.
  • Marker/Shape On Click - Decide what happens when clicking a marker: Open Infowindow, Redirect to the listing page, Lightbox, or None.
  • Info Window Trigger - Appears when Marker/Shape On Click is set to Open Infowindow. Choose Show on click (default) or Show on hover to control how the infowindow opens. This applies to markers only (not shapes).
  • Clustering - Enable to group nearby markers; choose a cluster icon style if desired.

Layout controls the number of listings shown and interaction behavior.

  • Limit - Maximum listings per page/load. (Default: 12.)
  • Pagination Method - Select Disabled, Load More, Numeric, or Infinite Scroll for loading additional listings. (Default: Load More.)
  • Listing Link Pro - Define click behavior: Normal, New Tab, Lightbox, or Panel (Right/Left/Bottom). When using Lightbox or panel, you can choose the single listing style for the popup/panel.

Configure default ordering and user-available sort options.

Choose a default sort field (e.g., Published Date, Title, Price) and order (Ascending/Descending).

Enable or disable sort criteria available to users:

Use the Search tab to embed a search/filter form directly with your accordion. This is useful if you want users to narrow down the listings they see in the accordion:

  • Searchable: Toggle to enable or disable search for this shortcode. When enabled, the accordion can be filtered by a search form. When disabled, the shortcode shows fixed results that do not change based on search queries.
  • Search Form: Select which Listdom search form to display with this accordion. This dropdown will list any search forms you have created by their titles. Choose a form that has fields relevant to these listings.
  • Search Form Position: Choose where the search form appears in relation to the accordion:
    • Show on top
    • Show on bottom
    • Show on left
    • Show on right
    • Show before the listings

Top or bottom placement usually works best. Left or right can be used as a sidebar, and “Show before the listings” places the form ahead of the listing content.

  • Sticky Search Form: When using Show on left or Show on right, enable this option to keep the sidebar form visible while scrolling. If the form is taller than the viewport, Listdom automatically adds a vertical scrollbar.
  • Sticky Offset (px): Set the top spacing for sticky sidebar forms. This helps prevent overlap with fixed headers. Leave it empty to use default spacing.
  • Ajax Search Advanced Portal Search: Choose the search behavior when AJAX is available:
    • Disabled: Submit normally with a full page reload.
    • On Submit: Apply filters via AJAX when the user submits the form.
    • On The Fly: Update results as the user changes fields.

The fields users see come from the selected search form itself. The Search settings here only control placement and behavior.

Usually, you will create a custom search form tailored to the listings shown in the accordion and select it here. That way, users can refine what they see without leaving the page. To build and configure those forms, see Create Search & Filter Form and Search Form Fields and Options. For a practical walkthrough, see Listdom Search Forms.

The Filter Options tab lets you predefine criteria to limit which listings are shown in this accordion, even before any user search or interaction. These filters work behind the scenes to include or exclude listings based on taxonomy terms or other attributes.

For each filter type below, you can configure an Include list or Exclude list of terms. “Include” means only show listings that have those terms. “Exclude” means hide any listings that have those terms. If you leave a filter category blank, it imposes no restriction on that aspect.

  • Categories: Filter by listing categories.
    • Include Categories: Choose one or more categories; only listings in those categories will appear in this accordion.
    • Exclude Categories Pro: Choose categories to omit; any listing in those categories will be left out.
  • Locations: Filter by location taxonomy.
    • Include Locations: Only show listings that are in the selected location(s).
    • Exclude Locations Pro: Omit listings that are in the selected location(s).
  • Tags: Filter by listing tags.
    • Include Tags: Show listings that have at least one of these tags.
    • Exclude Tags Pro: Do not show listings that have any of these tags.
  • Features: Filter by features (these are like amenities or boolean attributes of a listing).
    • Include Features: Listings that have any of the selected feature(s) will be included.
    • Exclude Features Pro: Exclude listings that have any of the selected features.
  • Labels: Filter by label terms.
    • Include Labels: Show only listings that have one of these label(s) (for example, only “Featured” listings).
    • Exclude Labels Pro: Hide listings that have any of these labels.
  • Author (Listing Owner): You can restrict by listing author (the user who posted the listing).
    • Select one or more authors under Include to show only listings by those user accounts.
    • Or select authors under Exclude Pro to hide listings by those users.
  • Custom Fields: If you have custom fields associated with listings, they appear here for filtering based on the field type. Use these to include listings based on custom metadata (exclude options are not available for custom fields).
    • Checkbox: Enter the checkbox value to match.
    • Time: Pick a time value.
    • Date: Select a date.
    • Tel: Enter a phone value.
    • Textarea: Enter text to match the textarea content.
    • Text: Enter text to match the field value.
    • Number: Set a minimum and/or maximum range (two numeric inputs).
    • Dropdown: Choose one or more values from the dropdown list (multi-select).
    • Radio: Enter the radio value to match.
    • Datetime: Select a date and time value.
    • URL: Enter a URL value.
    • Email: Enter an email value.
    • Image: Image fields are not available as filters in this section.
  • Rank Addon Rank: Added by the Listdom Rank add-on. Filter listings by rank using minimum and maximum values, or leave them blank to skip ranking filters.
  • Memberships Membership: Added by the Listdom Membership add-on. Filter listings by membership packages using checkboxes.

You can combine multiple filters. A listing must satisfy all the Include filters and none of the Exclude filters to appear. Within a single filter type, if multiple terms are included, a listing that has any one of those terms will pass (logical OR for included terms within one filter type). Exclusions work similarly: if a listing has any one of the excluded terms, it will be filtered out.

If no Filter Options are set, the shortcode shows all eligible listings by default. These pre-filters form the base dataset for the shortcode. If you also attach a search form, that search refines this pre-filtered set rather than replacing it.

Using Filter Options, you can create an accordion shortcode that is targeted to a specific subset of listings. For example, you might include one category and one location, or exclude one tag, label, or author, to keep the output focused on exactly the content you want.

City Guide with Map

Create a shortcode filtered to the “Tourist Attraction” category and set Map Position = Right. Users see an accordion of attractions on the left and a map with markers on the right. “Load More” loads additional listings.

Compact Directory with No Images

Disable Display Image and unnecessary elements to show a simple text-based list. This yields a fast, clean accordion for service providers.