Back to Community
Home / Community / Plugin → Wp shortcodes plugin — shortcodes ultimate

Fixing Common Issues with the Shortcodes Ultimate Spoiler and Accordion

20 threads Sep 16, 2025 Plugin → Wp shortcodes plugin — shortcodes ultimate

Content

The [su_spoiler] and [su_accordion] shortcodes from the 'WP Shortcodes Plugin — Shortcodes Ultimate' are incredibly popular for creating interactive, collapsible content. However, users often encounter a specific set of challenges when implementing them. This guide addresses the most common issues and provides practical solutions based on community discussions.

Common Issues and Their Solutions

1. Spoilers Opening or Behaving Incorrectly on Mobile

The Problem: A spoiler set to open="no" appears open by default on mobile devices and cannot be closed.

Why It Happens: This is frequently caused by a conflict with your theme's or another plugin's responsive JavaScript or CSS, which can interfere with the spoiler's default state.

The Solution:

  1. Conflict Test: The first step is always to test for conflicts. Temporarily switch to a default WordPress theme (like Twenty Twenty-One) and disable all other plugins. If the issue resolves, reactivate your theme and plugins one by one to identify the culprit.
  2. Custom CSS: You can use CSS media queries to force spoilers closed on specific screen sizes. This is a common workaround.

2. Page Jumps or Scrolls Incorrectly When Opening/Closing

The Problem: When a user clicks a spoiler, the page jumps erratically, often scrolling the content out of view. This is particularly common on sites with fixed-position headers.

Why It Happens: The plugin's JavaScript calculates the page height and scroll position when the spoiler toggles. A fixed header changes the available screen space, confusing this calculation and causing an undesirable jump.

The Solution: Unfortunately, there is no one-click fix within the plugin's settings for this. The solution typically requires adding custom JavaScript to override the default scrolling behavior or to manually trigger a page redraw after the spoiler animation completes.

3. Custom CSS for Transitions and Styles Not Working

The Problem: You try to customize the animation speed (e.g., transition: padding-top 1s;) or the active/hover state of a spoiler, but your styles are overridden.

Why It Happens: The plugin's default stylesheet may be loading after your custom CSS, or its styles may be more specific, causing your !important declarations to be ignored.

The Solution:

  1. Increase Specificity: Make your CSS selectors more specific than the plugin's. For example, use body .su-spoiler-content { transition: padding-top 1s !important; }.
  2. Check Loading Order: Ensure your custom CSS is being enqueued to load after the plugin's styles, or add it directly in the 'Additional CSS' section of the WordPress Customizer.
  3. Target Active State: As noted by users, there is no native .su-spoiler-open class. To style an open spoiler, you may need to target the open content area .su-spoiler-content or use a combination of :focus and JavaScript-added classes.

4. Cumulative Layout Shift (CLS) on Google PageSpeed

The Problem: After adding spoilers, your Google PageSpeed Insights report shows a higher Cumulative Layout Shift score, hurting SEO performance.

Why It Happens: CLS measures visual stability. Since the spoiler's hidden content is not initially rendered at its full height, the browser cannot reserve the correct amount of space for it. When the spoiler is opened, it pushes down the content below it, causing a layout shift.

The Solution: This is a complex issue with no perfect solution for dynamic content. However, you can minimize it by avoiding spoilers for critical above-the-fold content or by implementing a custom loading strategy where spoilers are only rendered after the initial page layout is complete.

5. Spoilers Not Closing Others (Non-Accordion Behavior)

The Problem: Clicking one spoiler does not close others on the page, leading to a long page with many open sections.

Why It Happens: This is the default behavior of the [su_spoiler] shortcode. The [su_accordion] shortcode is specifically designed to group spoilers so that opening one closes the others.

The Solution: For a true accordion effect where only one item is open at a time, you must wrap your spoilers in the [su_accordion] shortcode. If you have multiple independent accordion groups on one page (e.g., in different columns), each group needs its own set of spoilers wrapped in a separate [su_accordion] shortcode.

General Best Practices

  • Always Conflict Test: As suggested in the sample threads, the first step for any odd behavior is to test with a default theme and only Shortcodes Ultimate active. This quickly tells you if the issue is with the plugin or an external conflict.
  • Use Custom CSS Classes: The Shortcodes Ultimate team has built a powerful system for customization. Most shortcodes accept a class="" parameter. Adding your own class here allows you to target specific shortcodes with CSS without affecting all others.
  • Consider Performance: Pages with a very large number of spoilers (dozens or hundreds) can load slowly because each one adds extra HTML and requires JavaScript to become interactive. For large directories or glossaries, consider a paginated solution or a searchable database instead.

By understanding these common pitfalls and their solutions, you can effectively troubleshoot and implement the spoiler and accordion shortcodes to create a smooth user experience on your website.

Related Support Threads Support