Lester Chan

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: <code>[showhide type="pressrelease"]Press Release goes in here.[/showhide]</code>
<h3>Usage</h3>
<ol>
<li>By default, content within the showhide shortcode will be hidden.</li>
<li>Example: <code>[showhide]Press release content goes in here.[/showhide]</code></li>
<li>
Default Values: <code>[showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]</code>
</li>
<li>
You can have multiple showhide content within a post or a page, just by having a new type.
</li>
<li>
Example: <code>[showhide type="links" more_text="Show Links (%s More Words)" less_text="Hide Links (%s Less Words)"]Links will go in here.[/showhide]</code>
</li>
<li>
If you want to set the default visibility to display.
</li>
<li>
Example: <code>[showhide hidden="no"]Press release content goes in here.[/showhide]</code>
</li>
<li>
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.
</li>
</ol>
<pre><code><div id="pressrelease-link-1" class="sh-link pressrelease-link sh-hide"> 
 <a href="#"> 
 Show Press Release (4 More Words) 
 </a> 
</div> 
<div id="pressrelease-content-1" class="sh-content pressrelease-content sh-hide" style="display: none;">Content</div>
</code></pre>
<ol>
<li>With the example above, here are the following styles you can use in your CSS:</li>
</ol>
<pre><code>.sh-link A { } 
.sh-content { } 
.pressrelease-link { } 
.pressrelease-link.sh-hide A { } 
.pressrelease-link.sh-show A { } 
.pressrelease-content { } 
.pressrelease-content.sh-hide { } 
.pressrelease-content.sh-show { }
</code></pre>
<h3>Development</h3>
<a href="https://github.com/lesterchan/wp-showhide" title="https://github.com/lesterchan/wp-showhide" rel="nofollow ugc">https://github.com/lesterchan/wp-showhide</a>
<h3>Translations</h3>
<a href="http://dev.wp-plugins.org/browser/wp-showhide/i18n/" title="http://dev.wp-plugins.org/browser/wp-showhide/i18n/" rel="nofollow ugc">http://dev.wp-plugins.org/browser/wp-showhide/i18n/</a>
<h3>Credits</h3>
<ul>
<li>Plugin icon by <a href="http://www.freepik.com" rel="nofollow ugc">Freepik</a> from <a href="http://www.flaticon.com" rel="nofollow ugc">Flaticon</a></li>
</ul>
<h3>Donations</h3>
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.

WP-ShowHide


Shows and hides text just like it says it does! Thank you!


Works great with WP 6.8.1

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

Aboutorab Pourhaghani

This plugin is similar to Wp-ShowHide that extended for nested shortcodes, custom style and two link toggling the content. A link is top of the content and other is below the content. By default the content is hidden and user will have to click on the the link to toggle it. 
Example usage: [pshowhide id=”1″]Your text is here.[/pshowhide]. The default text value is in Persian language, but you can change it.
This plugin contains four layers. External layer contains other layers. Top layer contains top link. Middle layer contains the content. Below layer contains below link.
<h4>Usage</h4>
<ol>
<li>By default, content within the pshowhide shortcode will be hidden.</li>
<li>Example: [pshowhide]Your text is here.[/pshowhide]</li>
<li>
Default Values: [pshowhide id=”1″ more_text=”+ Show Below Text” ‘less_text=”- Hide Below Text” less_textb=”- Hide Up Text” hidden=”yes”]Your text is here.[/pshowhide].
</li>
<li>
You can have multiple show/hide contents within a post or a page, just by having a unique id. 
Example: [pshowhide id=”text1″]Your text is here.[/pshowhide] 
 [pshowhide id=”text2″]Your text is here.[/pshowhide] 
 [pshowhide id=”text3″]Your text is here.[/pshowhide]
</li>
<li>
You can have multiple nested show/hide contents within a post or a page, just by having a unique id. this plugin has other shortcode for nested show/hide text. you can also use [pshowhide1], [pshowhide2], … , [pshowhide10] in addition [pshowhide]. 
Example: [pshowhide id=”text1″] Your text is here. 
 [pshowhide1 id=”text2″] Your nested text is here. 
 [pshowhide2 id=”text3″] Your nested text is here. 
 [/pshowhide2] 
 [/pshowhide1] 
 [/pshowhide]
</li>
</ol>
If you need more than these shortcode, you can edit plugin by changing the value of $number_of_shortcodes variable to your number you need. default value is 10.
<ol>
<li>
You can use a lot of options to change default style the shortcode. Below is the list of options you can use them with your custom value in pshowhide shortcode:
id=”text1″ : this option has uniqe id for per show/hide shortcode in the content. 
more_text=”+ Show Below Text” : this option is used for the more text in up link. 
less_text=”- Hide Below Text” : this option is used for the less text in up link. 
less_textb=”- Hide Up Text” : this option is used for the less text in down link. 
hidden=”yes” or “no” : this option is used for show or hide the content when post or page is loaded.
Other options is for changing styles, so you must now css command for their values.
The below options is used for the external layer that contains other layers.
border=”1px solid #800000″: this option is used for border style arround the shortcode and the content. 
padding=”2px 2px 2px 2px” : this option is used for padding style arround the shortcode and the content. 
margin=”1px 1px 1px 1px” : this option is used for margin style arround the shortcode and the content. 
radius=”4px 4px 4px 4px” : this option is used for radius style arround the shortcode and the content. 
bgcolor=”#ffffff” : this option is used for background color style arround the shortcode and the content. 
color=”#000000″ : this option is used for text color style arround the shortcode and the content. 
add_style=”” : this option is used for adding the css code to the shortcode and the content. 
style=”” : this option is used for your personal css code to the shortcode and the content. when this option is used, other css code will be disabled.
The below options is similar to external layer options, but is used for the top link in pshowhide shortcode block.
link_border=”1px solid #800000″: 
link_padding=”5px 12px”: 
link_margin=”0px”: 
link_radius=”20px”: 
link_bgcolor=”#80BD00″ 
link_color=”#FFFFFF” 
link_style=”” 
add_link_style=”” 
bg_hover=”#FFFF00″ : this option is used for change background color of top link whene you hover on it. 
text_hover=”#FF0000″: this option is used for change link color of top link whene you hover on it.
The below options is similar to top link options, but is used for the below link in pshowhide shortcode block.
linkb=”off”: if this option value is “off”, the below link will be disable. 
linkb_border=”1px solid #800000″: 
linkb_padding=”5px 12px”: 
linkb_margin=”0px”: 
linkb_radius=”20px”: 
linkb_bgcolor=”#80BD00″ 
linkb_color=”#FFFFFF” 
linkb_style=”” 
add_linkb_style=”” 
bgb_hover=”#FFFF00″ : this option is used for change background color of top link whene you hover on it. 
textb_hover=”#FF0000″: this option is used for change link color of top link whene you hover on it.
The below options is used for top layer contains top link and similar to external layer options.
up_border=”0px solid #ffffff” 
up_padding=”0px” 
up_margin=”0px” 
up_radius=”0px” 
up_bgcolor=”#ffffff” 
up_color=”#000000″ 
add_up_style=”” 
up_style=””
The below options is used for middle layer contains the content and similar to external layer options.
mid_border=”0px solid #ffffff” 
mid_padding=”0px” 
mid_margin=”0px” 
mid_radius=”0px” 
mid_bgcolor=”#ffffff” 
mid_color=”#000000″ 
add_mid_style=”” 
mid_style=””
The below options is used for below layer contains below link and similar to external layer options.
dwn_border=”0px solid #ffffff” 
dwn_padding=”2px 2px 2px 2px” 
dwn_margin=”1px 1px 1px 1px” 
dwn_radius=”4px 4px 4px 4px” 
dwn_bgcolor=”#ffffff” 
dwn_color=”#000000″ 
add_dwn_style=”” 
dwn_style=””
</li>
</ol>

Persian Nested Show/Hide Text

Allows you to embed shortcodes for creating nested content and toggling the visibility of the content via a link.

WP-ShowHide vs Persian Nested Show/Hide Text