Skip to content
Webilia Docs

Accordion Skin

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.

Skin

Section titled “Skin”

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.

Style

Section titled “Style”

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

Elements

Section titled “Elements”
  • 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” (requires Labelize).
  • 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.

Map

Section titled “Map”

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.
  • Marker/Shape On Click – Decide what happens when clicking a marker: open an Info Window, Redirect to the listing page, Lightbox, or None.
  • Clustering – Enable to group nearby markers; choose a cluster icon style if desired.

Layout

Section titled “Layout”

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.

Sort

Section titled “Sort”

Configure default ordering and user-available sort options.

Default Sort

Section titled “Default Sort”

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

Sort Options

Section titled “Sort Options”

Enable or disable sort criteria available to users:

Section titled “Search”

Attach a search form to filter listings within the accordion view.

  • Search Shortcode – Select a Listdom search form to display.
  • Position – Show the search form at the Top or Bottom.
  • AJAX Search – Enable to update listings without a full page reload. In Pro, you can also leverage the APS addon for advanced search behaviors.

Filter Options

Section titled “Filter Options”

Pre-filter which listings appear using include/exclude rules:

  • Categories – Include or exclude specific categories.
  • Locations – Include or exclude location terms.
  • Tags – Include or exclude tags.
  • Features – Include or exclude features/amenities.
  • Labels – Include or exclude labels Labelize.
  • Authors – Include or exclude listings by certain authors.
  • Custom Fields – Filter by custom field values.
  • Advanced Logic – The APS addon can adjust taxonomy matching logic (e.g., AND vs. OR).

Examples

Section titled “Examples”

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.