# WP-ShowHide
Contributors: GamerZ  
Donate link: https://lesterchan.net/site/donation/  
Tags: show, hide, toggle, visibility, press release  
Requires at least: 4.6  
Tested up to: 7.0  
Stable tag: 2.0.0  
Requires PHP: 7.4  
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Allows you to embed content within your blog post via WordPress ShortCode API and toggling the visibility of the content via a link.

## Description
By default the content is hidden and user will have to click on the "Show Content" link to toggle it. Similar to what Engadget is doing for their press releases. Example usage: `[showhide type="pressrelease"]Press Release goes in here.[/showhide]`

### 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"]`

1. You can have multiple showhide content within a post or a page, just by having a new type.
2. Example: `[showhide type="links" more_text="Show Links (%s More Words)" less_text="Hide Links (%s Less Words)"]Links will go in here.[/showhide]`

1. If you want to set the default visibility to display.
2. Example: `[showhide hidden="no"]Press release content goes in here.[/showhide]`

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="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="sh-content pressrelease-content sh-hide" hidden>Content</div>
~~~

2. 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 { }
~~~

### Development
[https://github.com/lesterchan/wp-showhide](https://github.com/lesterchan/wp-showhide "https://github.com/lesterchan/wp-showhide")

### Credits
* Plugin icon by [Freepik](https://www.freepik.com) from [Flaticon](https://www.flaticon.com)

### 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.

## Breaking Changes
Version 2.0.0 rewrites the front-end JavaScript. The shortcode and its attributes are unchanged, so your posts do not need editing — but the generated HTML is different, so **custom CSS and JavaScript may need updating**.

* **The toggle is now a `<button class="sh-toggle">` instead of `<a href="#">`.** CSS targeting `.sh-link A` must become `.sh-link .sh-toggle`. The plugin ships a small inline style so the button still renders as a plain text link rather than a native button.
* **The inner `<span id="{type}-toggle-{post_id}">` has been removed.** The label now sits directly on the button, so anything targeting that ID should target `.sh-toggle` instead.
* **Hidden content now uses the `hidden` attribute instead of `style="display: none;"`.** If your CSS sets `display` on `.sh-content` it will now win over `[hidden]`; add `.sh-content[hidden] { display: none; }` or raise your specificity.
* **jQuery is no longer enqueued by this plugin.** If your theme was relying on WP-ShowHide to pull jQuery onto the page, enqueue it yourself.
* **The global `showhide_toggle()` function has been removed.** Nothing replaces it. To toggle a block programmatically, click its `.sh-toggle` button; to react to a toggle, listen for the `sh-link:toggle` event.
* **Internet Explorer is no longer supported.** The script uses `Element.closest()` and the `CustomEvent` constructor.
* **Repeating the same `type` within one post now appends a counter to the element IDs** (`pressrelease-content-1`, `pressrelease-content-1-2`, ...). The first occurrence keeps its original ID, so this only affects posts that were previously emitting duplicate IDs anyway. Style by class rather than ID if you use this pattern.

The `sh-link:more`, `sh-link:less` and `sh-link:toggle` events are **not** a breaking change — they still fire on the `.sh-link` element and still bubble, so existing `jQuery( ... ).on( 'sh-link:toggle', ... )` handlers keep working.

## Changelog
### 2.0.0
* New: WordPress 7.0
* New: Rewritten in vanilla JavaScript, jQuery is no longer required
* New: The JavaScript is now only loaded on pages that actually use the shortcode
* New: The toggle is now a `<button>` with `aria-controls`, and its state is driven by `aria-expanded`
* FIXED: Fatal error when the `more_text`/`less_text` attributes contain extra format specifiers
* FIXED: Malformed JavaScript when the shortcode is used outside of the loop
* FIXED: The `type` attribute is now restricted to characters that are valid in an HTML ID/class
* FIXED: Word count now counts all whitespace, so multi-paragraph content is no longer under-counted
* FIXED: PHP 8.1+ deprecation notice when the shortcode is used without any content
* FIXED: The toggle label no longer desyncs when the more/less text contains a backslash
* FIXED: Using the same `type` more than once in a post no longer produces duplicate element IDs
* FIXED: Word count no longer counts the contents of `<script>` and `<style>` blocks as words
* Removed: `load_plugin_textdomain()`, which WordPress has handled automatically since 4.6
* Removed: The global `showhide_toggle()` function, superseded by the delegated click handler

### 1.06
* FIXED: esc_html() for more text to prevent XSS

### 1.05
* FIXED: esc_attr type attributes to prevent XSS

### 1.04
* NEW: Added aria-hidden and aria-expanded to elements

### 1.03
* NEW: Added `.sh-link` and `.sh-content` as a standard class name on top of the type specific class name.
* NEW: Added do_shortcode() to allow shortcode to be parsed within ShowHide

### 1.02
* FIXED: Some theme uses `.hide` as `display: none` and hence I have changed `.show` to `.sh-show` and `.hide` to `.sh-hide` to advoid conflicts.

### 1.01
* NEW: Added additional `show` or `hide` class to the link and content depending on the visiblity of the content to allow more precise CSS styling.

### 1.00 (01-05-2011)
* FIXED: Initial Release
	
## Upgrade Notice

N/A

## Screenshots

1. Show More - Press Release
2. Hide More - Press Release
3. Editor - Short Code

## Frequently Asked Questions

N/A
