WordPress Peekaboo Plugin

This plugin allows you to show and hide specific portions of content within a post or page. Visitors can then use custom show/hide links to show or hide the portions you’ve defined. The plugin enables a few WordPress shortcodes: [peekaboo], [peekaboo_link], and [peekaboo_content].

Quick Start Guide

Use [peekaboo_content] … [/peekaboo_content] to wrap content that you want to initially hide. Remember, you must use an opening [peekaboo_content] at the begining of the content you want initially hidden and a closing [/peekaboo_content] at the end of the content.

After you’ve wrapped a piece of content, you need to create a show/hide link. To do this you will use [peekaboo] or [peekaboo_link] … [/peekaboo_link] before or after the wrapped content. The [peekaboo] shortcode does not need to be closed.

To give a peekaboo link context, you will need to give it and it’s corresponding wrapped content a name. Use the name parameter on both the [peekaboo name="foo"] and the [peekaboo_content name="foo"] … [/peekaboo_content] shortcodes. Using the name parameter will link a wrapped content block to a show/hide link.

Here is an example of how to use it …

[peekaboo onshow="Click to hide all" onhide="Click to show all"]

CONTENT

[peekaboo name="foo"]

[peekaboo_content name="foo"]
	CONTENT
[/peekaboo_content]

CONTENT

CONTENT

[peekaboo name="bar" onshow="Click to hide" onhide="Click to show"]

or you can also [peekaboo_link name="bar"]click here[/peekaboo_link] to view the contents

[peekaboo_content name="bar"]
	CONTENT
[/peekaboo_content]

CONTENT

[peekaboo name="foobar" start="visible"]

[peekaboo_content name="foobar" start="visible"]
	CONTENT
[/peekaboo_content]

Detailed Usage

[peekaboo_content] … [/peekaboo_content]

[peekaboo_content name="foobar" start="hidden"] CONTENT [/peekaboo_content]

• name: gives the content block context and allows a show/hide link to be associated with the content
• start: (visible or hidden) this is the default state in which the content block starts as, default value is hidden

Use [peekaboo_content] to wrap content that you want initially hidden.

[peekaboo_content name="foo"]
	CONTENT
[/peekaboo_content]

The content block will be hidden by default, if you want to start the content block as initially visible, use the start="visible" parameter.

[peekaboo_content name="foobar" start="visible"]
	CONTENT
[/peekaboo_content]

[peekaboo_link] … [/peekaboo_link]

[peekaboo_link name="foobar" start="hidden"] LINK [/peekaboo_link]

• name: gives the show/hide link context and allows a content block to be associated with the link
• start: (visible or hidden) this is the default state in which the show/hide link starts as, default value is hidden

The [peekaboo_link] shortcode allows you to wrap any text into a show/hide link. If you do not specify the name parameter, it will default to “all” and the link will show/hide all content blocks. Links wrapped with [peekaboo_link] will not switch between an visible and hidden state.

[peekaboo]

[peekaboo name="foobar" onshow="hide foobar" onhide="show foobar" start="hidden"]

• name: gives the show/hide link context and allows a content block to be associated with the link
• onshow: this is the link text that is displayed when the content is visible
• onhide: this is the link text that is displayed when the content is hidden
• start: (visible or hidden) this is the default state in which the show/hide link starts as, default value is hidden

The [peekaboo] shortcode has no closing tag. The onhide and onshow parameters are optional, if not defined, the default settings will be used. You can change the defaults by going to the plugin’s settings page.

If you need to set default onhide and onshow text on a per-post basis you can use the peekaboo_onshow_text and peekaboo_onhide_text custom fields within a post or page.

If you do not specify the name parameter, it will default to “all” and the link will show/hide all content blocks.

Tip If you need to include brackets when using onshow or onhide inline, you must use the equivelant HTML entities: [ is [ and ] is ]

get_the_peekaboo_link()

get_the_peekaboo_link($onhide[,$onshow=NULL][,$name='all'][,$start='hidden'])

There may be instances where you need to create a peekaboo link in areas where shortcodes are not supported. The plugin provides you with two PHP functions to do this get_the_peekaboo_link() and the_peekaboo_link().

• get_the_peekaboo_link() will return the HTML link output
• the_peekaboo_link() will print the HTML output to the page

$link = get_the_peekaboo_link('show foobar','hide foobar','foobar');
echo $link;

the_peekaboo_link()

the_peekaboo_link($onhide[,$onshow=NULL][,$name='all'][,$start='hidden'])

Same as above except that the output is immediately printed to the page.

the_peekaboo_link('show foobar','hide foobar','foobar');

Using HTML instead of the Shortcodes

This plugin is very flexible, its heart is basically the javascript that makes it tick. If you are in a situation where either the shortcodes or PHP functions will simply not work for you, you can output the HTML yourself.

The following is a sample output of a Peekaboo link:

<a class="peekaboo_link peekaboo-foobar peekaboo_onhide" href="#">
	<span class="peekaboo_onhide">show foobar</span>
	<span class="peekaboo_onshow" style="display:none;">hide foobar</span>
</a>

The following is a sample output of a Peekaboo content block:

<div class="peekaboo_content peekaboo-foobar peekaboo_onhide" style="display:none;">
	CONTENT
</div>

Custom Styles

Peekaboo tries to be very flexible. Content blocks and links are given specific CSS classes for you to be able to target and apply custom styles.

Both content blocks and links have all of the following CSS classes applied:

• peekaboo_link
• peekaboo-NAME (uses the name you defined using the name parameter)
• peekaboo_onshow (only applied when the content block is visible)
• peekaboo_onhide (only applied when the content block is hidden)

Download

This project is hosted at the WordPress Plugin Directory, download WordPress Peekaboo Plugin.

If you need installation help, see the WordPress Codex on Manual Plugin Installation.

Related posts

1. WordPress HiFi Plugin — Head and Foot Injection
2. jQuery Image Preload Plugin
3. WordPress Plugin Internationalization (i18n) Localization (L10n)