FAIR

Federated and Independent Repositories

Show Hide Accordion by MediaArt

Plugin Banner

Show Hide Accordion by MediaArt

by MediaArt

Download
Description

Show Hide Accordion by MediaArt provides shortcodes for showing and hiding content and for creating accordion groups.

  • Native shortcode: [ma_collapse]...[/ma_collapse]
  • Nested native shortcodes: ma_collapse_level2 through ma_collapse_level7
  • Legacy compatibility: bg_collapse, legacy level shortcodes and bg_collapse_preset1
  • Original view styles: link, faq-link, link-inline, link-list, button-orange, button-red, button-green and button-blue
  • Original icon values: arrow, zoom and eye
  • Optional jQuery UI effects and animation speed
  • Optional accordion grouping
  • Legacy inline_css behavior is preserved for the link/button control
  • The unsafe legacy onclick attribute is intentionally ignored

The plugin is written to follow WordPress.org best practices, including capability checks, nonces, sanitization/escaping and translatable source strings.

Usage

Basic native shortcode:
[ma_collapse]Hidden content[/ma_collapse]

Custom labels:
[ma_collapse expand_text=”Show more” collapse_text=”Show less”]Hidden content[/ma_collapse]

Original orange button style:
[ma_collapse view=”button-orange” color=”#72777c” icon=”arrow” expand_text=”Show More” collapse_text=”Show Less”]Hidden content[/ma_collapse]

Legacy markup:
[bg_collapse view=”button-orange” color=”#72777c” icon=”arrow” expand_text=”Show More” collapse_text=”Show Less”]Hidden content[/bg_collapse]

Accordion grouping:
[ma_collapse group=”faq”]Item 1[/ma_collapse] [ma_collapse group=”faq”]Item 2[/ma_collapse]

Nested content:
[ma_collapse]Outer [ma_collapse_level2]Inner[/ma_collapse_level2][/ma_collapse]

See the Help tab in the plugin administration for all supported attributes and compatibility notes.

  1. Upload the plugin folder to /wp-content/plugins/ or install it through the Plugins screen.
  2. Activate Show Hide Accordion by MediaArt.
  3. Configure options under MA Tools Show/Hide Accordion.
  4. If replacing Show-Hide / Collapse-Expand, deactivate the old plugin so both plugins do not register the same legacy shortcodes.
Does it work with the original bg_collapse shortcodes?

Yes. The plugin supports the original free plugin’s main shortcode values, including its colored button styles, link variants, icons, inline_css behavior and preset1 shortcode. The legacy onclick attribute is not executed for security reasons.

Why are there level2, level3 and higher shortcodes?

They allow collapsible shortcodes to be nested by using different shortcode tag names. The level number itself does not change the visual style.

Where are the settings?

In the WordPress admin under MA Tools Show/Hide Accordion.

Great design!

By belbernard on September 9, 2026

This plugin has been a lifesaver because I was using Show-Hide/Collapse-Expand, which seems to have been abandoned after three years. It works immediately with the old bg_collapse markup, so just install it and deactivate Show-Hide.

With the help of Claude AI, I designed additional CSS code to reproduce almost the former layout:

/* --- Show Hide Accordion: port of bg-orange-button --- */

.shabm-wrap {
text-align: center;
margin: 1em 0;
}

.shabm-wrap .shabm-content {
text-align: left;
}

a.shabm-toggle,
a.shabm-toggle:visited {
display: inline-block;
cursor: pointer;
padding: 6px 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: inherit;
line-height: normal;
letter-spacing: normal;
text-transform: none;
text-decoration: none !important;
text-shadow: 0 1px 0 #ffee66;
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color: #ffec64;
border: 1px solid #ffaa22;
border-radius: 8px;
box-shadow: inset 0 4px 0 0 #fff6af;
}

a.shabm-toggle:hover,
a.shabm-toggle:focus {
border-bottom: 1px solid #ffaa22 !important;
color: #72777c !important;
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%) !important;
background-color: #ffab23 !important;
text-decoration: none !important;
outline: none;
box-shadow:
inset 0 1px 0 0 #fff6af,
0 10px 10px rgba(0, 0, 0, 0.25) !important;
}

a.shabm-toggle .shabm-icon {
position: relative;
bottom: 1px;
padding-right: 4px;
font-size: inherit;
}

This could be used (and made optional) in future versions of this plugin.

Once again, congratulations!

1.1.0

  • Restored the original link, button, icon, color, inline CSS, preset and control-position parameters.
  • Added interactive Help examples rendered by the real frontend shortcode renderer.
  • Improved nested content, accordion groups, animation previews, validation, accessibility and uninstall cleanup.

1.0.0

  • Initial MediaArt release with native ma_collapse shortcodes and legacy bg_collapse compatibility.
Back to top