WP-ShowHide

WP-ShowHide hides part of a post behind a button, so something long — a press release, a changelog, a spoiler — does not fill the page until a reader asks for it. The button says how many words it is hiding, which is what Engadget does with their press releases. Example usage: [showhide type="pressrelease"]Press Release goes in here.[/showhide]

There is nothing to configure and no settings screen. Every choice the plugin offers is an attribute of the shortcode that makes it, so two toggles in the same post can behave differently.

Features

• One shortcode, [showhide], usable any number of times in a post or page
• A Show/Hide block for the block editor, holding the content it hides as ordinary blocks and rendering exactly what the shortcode renders
• A button rather than a link, with aria-expanded and aria-controls, so the toggle works from the keyboard and reads correctly to a screen reader
• Labels that count the words they are hiding
• No jQuery, and no script at all on a page that uses neither the shortcode nor the block
• Custom DOM events on every toggle, for themes that want to react to one

Donations

I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it. If not feel free to use it without any obligations.

Usage

1. By default, content within the showhide shortcode will be hidden.
2. Example: [showhide]Press release content goes in here.[/showhide]

3. Default Values: [showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]

4. You can have multiple showhide content within a post or a page, just by having a new type.

5. Example: [showhide type="links" more_text="Show Links (%s More Words)" less_text="Hide Links (%s Less Words)"]Links will go in here.[/showhide]

6. If you want to set the default visibility to display.

7. Example: [showhide hidden="no"]Press release content goes in here.[/showhide]

Block editor

There is a Show/Hide block too, filed under Text in the inserter. It holds the content it hides as ordinary blocks — paragraphs, images, anything — so that content is written and edited in place instead of being typed into a field as markup, and it stays visible while you are editing. The Show/Hide panel in the sidebar carries the same four choices the shortcode attributes carry: the type, the two button labels, and whether it starts hidden.

The shortcode is unchanged and still supported. It is not deprecated, posts that use it need no editing, the block and the shortcode render the same markup, and one post can hold both.

1. You can style the content via CSS that is generated by the plugin. Here is a sample of the generated HTML. Note that pressrelease is the default type.

<div id="pressrelease-link-1" class="wp-showhide sh-link pressrelease-link sh-hide">
  <button type="button" class="sh-toggle" aria-expanded="false" aria-controls="pressrelease-content-1"
          data-sh-more="Show Press Release (4 More Words)"
          data-sh-less="Hide Press Release (4 Less Words)">Show Press Release (4 More Words)</button>
</div>
<div id="pressrelease-content-1" class="wp-showhide sh-content pressrelease-content sh-hide" hidden>Content</div>

1. With the example above, here are the following styles you can use in your CSS:

.sh-link { }  
.sh-toggle { }  
.sh-content { }  
.pressrelease-link { }  
.pressrelease-link.sh-hide .sh-toggle { }  
.pressrelease-link.sh-show .sh-toggle { }  
.pressrelease-content { }  
.pressrelease-content.sh-hide { }  
.pressrelease-content.sh-show { }

1. Every toggle fires three events on the .sh-link element, and all three bubble, so one listener on the document covers every toggle on the page: sh-link:more when a toggle opens, sh-link:less when it closes, and sh-link:toggle on both.

1. Install and activate the plugin.
2. Wrap the content you want hidden in [showhide] and [/showhide], or add the Show/Hide block in the editor and put the content inside it.

There is nothing to configure and no settings screen. Every choice the plugin offers is an attribute of the shortcode or a control in the block’s sidebar, so two toggles in the same post can behave differently.

1. 

   Four toggles on one page, three of them closed: the default, one that starts open, and two more whose ids do not collide

2. 

   The same page with a toggle opened

3. 

   The Show/Hide block in the editor, holding the content it hides as ordinary blocks so it stays editable, with the sidebar carrying the same choices the shortcode attributes carry

3.0.0

• BREAKING: Requires WordPress 6.8 and PHP 8.2, up from 6.0 and 7.4.
• BREAKING: Removed the showhide_scripts(), showhide_js() and showhide_shortcode() global functions. They were internals; the plugin registers its own shortcode and assets.
• BREAKING: The ShowHide and ShowHide_Template classes are now WP_ShowHide and WP_ShowHide_Template.
• NEW: Added a Show/Hide block for the block editor, which holds the content it hides as ordinary blocks. The [showhide] shortcode is unchanged and still supported — it is not deprecated, posts using it need no editing, and the two render the same markup.
• NEW: Restructured into includes/, behind the WP_ShowHide, WP_ShowHide_Template and WP_ShowHide_Options classes.
• NEW: Added the wp_showhide_version row, and an uninstall.php that deletes it on a single site and across a network.
• NEW: The toggle script and the stylesheet are now files, js/wp-showhide.js and css/wp-showhide.css, so a browser caches them once instead of reading them inline on every page.
• NEW: Added a PHPUnit and vitest test suite, and GitHub Actions CI.
• CHANGED: Both elements the shortcode renders now carry a wp-showhide class alongside the classes they have always had. Nothing was renamed or removed, so existing theme CSS is unaffected.
• FIXED: hidden="No" left the content collapsed instead of expanding it. The attribute is matched case insensitively now, so any spelling of no works.
• FIXED: Requesting wp-showhide.php directly ran it outside WordPress instead of exiting.