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: (
visibleorhidden) this is the default state in which the content block starts as, default value ishidden
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: (
visibleorhidden) this is the default state in which the show/hide link starts as, default value ishidden
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: (
visibleorhidden) this is the default state in which the show/hide link starts as, default value ishidden
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 outputthe_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
nameparameter) - 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.
HI Dimas, thanks for this great post.
I have a question: can links that are in the sidebar target to show/hide specific divs which are wrapped with the [peekaboo] tags in a different post?
To clarify: I would like to have a post that i can edit and links in the sidebar will float a specific div in that post over the contents of the page.
Thanks,
Dan
Dan, within a page or post you can have the link be anywhere. One draw back is that certain places outside the post may not support the default shortcode processing.
I’ve updated the plugin to support two functions to aid in the link creation process.
If you needed to place a link outside of the post area, in an area that does not support shortcodes you can try the PHP functions
get_the_peekaboo_link()andthe_peekaboo_link(see documentation above). Additionally you can try outputting HTML.Thanks alot,
I’ll give it a try
Dan
Great plugin. It was just what I was looking for to help un-clutter my sites home page.
Hi Dimas,
GREAT PLUGIN…just what i was looking for – an easy way for my client to break up his long content!
I do have one question, though. I want to add a link to the END of the expanded content that will allow the user to collapse it again. As it works now, the user has to scroll back to the top in order to collapse the content. Is there a way to do this with shortcode?
Thanks gain for a great plugin! 5 stars from me
Lori
I just tried putting the link shortcode within the content shortcode and it worked.
Hi Jim,
Hmmmm….maybe I had a typo somewhere…I’ll check again.
THANKS!
Lori
Dude this is awesome! Going to try it out one of these days when I have the time/patience to follow this guide.
Forgot to mention that I like how the new blog design looks. You can delete this comment if ya want.
Nice plugin.
After upgrading to WP 3.0, my peekaboo link does not show the div that I hid. I get:
Error: console is not defined
Source File: http://sustainabledelco.org/wp-content/plugins/peekaboo/assets/global.js?ver=0.2
Line: 47
Any glue what’s happening?
Thank you.
Jim, sorry for the error, its been fixed, see version 1.0.4
Thank you.
Dimas,
Great Job, Could you explain me why under firefox it s working by not on chrome or safary; even try with IE
link where it s used :
http://netservices56.fr/caribe_test/?page_id=24
It appears that WordPress is adding extra
<p>tags where it shouldn’t. The HTML seems to come out like so:It should come out like:
Try to avoid extra RETURN characters where they aren’t needed. Also you can try looking at the HTML view in the editor to make sure it’s correct, it should look something like this:
I will look into this and see if I can make adjustments on the plugin side of things to correct this issue.
Great pluging!
I just noticed the Chome and IE problem today so It’s good to hear that you are looking into the problem
Shortcode works but Admin Settings page is blank. Using WP3.0 & tried Chrome, IE. Reinstalled twice. Shouldn’t that page show settings? Thanks in advance for any advice.
Hmm, very weird … the settings page should definitely show the settings. I’ll give it a try on fresh install of WordPress 3.0 and see what happens. Can you confirm that the admin page URL you are looking at is something like:
Right: http://www.sitename.org/test/wp/wp-admin/options-general.php?page=peekaboo
thanks a lot
I’m new to this. What exactly would/could I add in the typical page template (page.php) that would allow me to simply add in a peekaboo type tag in pages, in the same way I’d use the or trick for posts? I’ve had no luck making these work for wp pages, although the peekaboo plugin is a nice workaround.
hey dimas,
i am trying the plugin on my personal pc using xampp / wordpress 3.0.
after the installation and on clicking the settings link, i am getting the following warnings:-
Warning: include_once(C:/xampp/htdocs/wp-content/plugins/peekaboo/assets/menu.php) [function.include-once]: failed to open stream: No such file or directory in C:\xampp\htdocs\wordpress\wp-content\plugins\peekaboo\peekaboo.php on line 103
Warning: include_once() [function.include]: Failed opening ‘C:/xampp/htdocs/wp-content/plugins/peekaboo/assets/menu.php’ for inclusion (include_path=’.;C:\xampp\php\PEAR’) in C:\xampp\htdocs\wordpress\wp-content\plugins\peekaboo\peekaboo.php on line 103
pls help,
sumit
Great plugin mate. I was looking for something like this for long time.
I’ve a quick question. How can I use another Shotcode under Shortcodes of your Plugin?
I use another plugin “Table Reloaded” which enables me to place tables using [table id=1 /] shortcode. When I place this code inside your shortcode it just shows the text “[table id=4 /]” and not the actual table.
Is there a workaround? Any help is highly appreciated.
Regards
FP
FirePips, I’ve updated the plugin, update to version 1.0.7, let me know if it works out for you!
Works Great !!!
Thanks a lot Dimas…really appreciate your help mate
still having the same problem!
Sumit, that is weird as the path appears to be correct, If you can, do the following:
1. Download the plugin again here (just click download)
2. Extract it from the ZIP file and confirm the following files are present:
peekaboo peekaboo.php uninstall.php assets global.js menu.php3. Upload the files to your server/host, you can overwrite the current peekaboo files you have up there now.
4. Test, let me know if this works for you?
Hi,
I can’t seem to get the plugin to work properly on my site: http://www.craigstokes.com/about-craig-stokes/
Any idea why it might not be toggling for me?
Thanks.
Craig, make sure you have a name assigned to the link and content areas, like so:
I like your post headline font on your site, really nice touch!
Hi,
Is it possible to attach the shortcode to an image instead of the text link? i would like the hidden content to appear once the visitor has clicked on a graphic. Thanks very much,
Ted.
Ted, you should be able to do the following:
Ted, I had to make an adjustment to the plugin, be sure you grab the latest version 1.0.9+
hi,
sorry, i’m not an expert but not exactly a newbie either. i have installed the plugin manually but, when going to “settings”, get the error message:
in the ftp dir all files are present.
what am i missing?
thanks in advance
/malik
malik, grab version 1.0.10, this should fix your problem (you should also be able to do a plugin update through the UI)
Franck, sorry for the delay, I’v figured out the problem and it has been fixed in version 1.0.10, thanks for reporting it!
thanks Dimas,
works fine now.
best,
/malik
hi again,
i spent quite some time with trying to define some css for the “show” and “hide” text within a post (because they are a p break under the block which is to low for me). it worked well for the “content” which i set to -22px to make it fit but i cannot get to hide&show. pl take a look at http://maki-design.com/blogs/mediacircus/ and you’ll see what i mean.
help is very much appreciated, the more so because, again, this seems to be quite basic.
/malik
malik, can you explain your problem a little more, I’m not sure that I fully understand … let me know what your ultimate goal is, how do you want it ultimately to look like?
yeah, sure. i don’t want you to do my homework though. so thanks.
the spacing between the “continue reading” as well as the “close” text and the “content” block is too wide because it is obviously a “” break. now, a line break “” would already be better; but best would be if i could control the margin with css (which i did for the “content”, in this case ‘margin-top=”-22px”‘, which pulls the gap half ways up the p break).
hm, was that clear? if you look at the site, you see that “continue” and “close” are falling into the footer. yes i could move the footer away in the css but then the “cont” and “close” would still be too far from the “content” (so much for the visual explanation ;).
help, the inside of ” ” got lost: the 1st filling is a “p” paragraph” break the 2nd a “br” line break.
oh my …
Looks like a great plugin. Will give it a try. I’ve been using ‘hackadelic-sliding-notes’, but I may replace some of that usage with peekaboo when I get a chance to clean things up.
Thanks for all the great options.
~Jeff
what works so fine with “[peekaboo][peekaboo_content] CONTENT [/peekaboo_content]” does not work with multiple posts on one page without opening _all_ content in _all_ posts.
i cannot get it working in the very same way for different posts independently.
using the “name” param or any other given possiblity leaves the show (link)text in the textblock and does not set the hide (link)text at the end of the content. am i missing something?
/malik
Thanks so much, Dimas, for the plugin. I’ve been searching a long time for a show/hide toggle that actually works for me. I haven’t yet deployed this on any site (just an experimental hidden page) so far, but I have a question. When I tried it, it showed the links as [+ show][- hide] which is certainly clear. But is there any chance of changing the wording, e.g. “click here to see more”? I notice that malik has done this so that his trigger wording is “Continue Reading” and ” Close.” How is this done? I’m not one for getting my hands too dirty in code (lest I mess things up).
Thanks again.
Dimas,
do you see the possibility to insert a line of code which would bring the content back to where it opened after closing it from the end. because, when the content text is long, you end up somewhere in the page — and a way below article — and then have to arduously find your way back.
/malik
@malik, can you put a content example in a txt file and email it to me so I can test it out and see what you are talking about. This will help me resolve any issues with the plugin.
@marcia, take a look at the
peekaboo“onshow” and “onhide” parameters and equally thepeekaboo_linkshortcode.Not sure if this question has been raised before, but how can this plugin be used multiple times on the same page? I have five different tour programs on offer, and would like to expand/collapse them one at a time. I have successfully set up the first item and found it working perfectly, but if I attempt to deploy a second instance, the page simply renders blank.
http://straightbamboo.com/tours
Joel, sorry for the late response, your comment got trapped in the SPAM queue (which I typically check once a week or so). Looking at your link, it seems that you got everything squared away.
I’m following up on the question from Nov 13th – is there a way, if there are multiple instances on the same page, to have the visible instance hide when another is selected. Right now I have them stacked so when a user selects different instances, they just make the page taller with all visible content, but the user has to manually make an older selection hide.
http://staging.gxs.com/resources/thought_leadership/first_take_videos1
Dave, thats a good idea. There currently isn’t a way, however I think its an easy enough request that I can get it done quickly, I will make an update later this evening.
Any luck?
Dave, the plugin has been updated, it should come through WordPress as a plugin update v1.1 … let me know how it works for you.
hi, really nice plugin, works great!
Is there a possibility to show the content to users which have java-script disabled or no js support?
Hey Dimas, thanks for following up!! OMG – works great -you totally ROCK!!!
Hello Dimas,
Thanks again for this great plug in!
I have a question:
I want to use the plugin to show/hide images when clicking on a thumbnail of that same image.
i have it all set up correctly. the problem is that when the big image is shown it’s thumbnail gets hidden. I would like the thumbnail to still show up. I have 4 images and only 3 thumbnails show up (the missing thumbnail is the one corresponding to the large image)
Since the page is not live yet, I have added this link which demonstrates the current status:
http://www.dmdesign.co.il/temp/peekaboo/peekaboo.html
Thanks for the help,
Dan
I’m trying to get this working in a table using the html method and assigning the class to the tag like so:
`Content
[+ Expand]
[- Collapse]
Content Rows
`
It collapses / hides the “Content Rows” but will not expand. Any ideas or work arounds?
Thanks!
Got it working.. not sure how. Thanks for developing and maintaining this plugin.
Cheers!
Hello Dimas,
Just wanted to ask if you had the time to take a look at my question (2 comments up)
The site is now on air so you could look at the behaviour.
The relevant page is this:
http://www.beco.co.il/site/shop/
Thanks again
Dan
Dan, sorry for the delay. I’ve created a quick example, Each link in this example represents a thumbnail. There is one thing to note, the content area would need a default image, currently “Peekaboo” does not support a “default/ifelse” content (but I will consider the idea). My recommendation would be to use a default background image (or absolute positioned image) that gets covered up when the links/thumbs are clicked.
Hi Dimas,
Thanks a lot, I implemented your example on the website and it works!
changed the class to peekaboo_onshow and removed the span.
http://www.beco.co.il/site/shop/
Dan
Have you encountered conflicts with the plugin? I really like the plugin and appreciate the mod you did to hide/show all. The problem I’m running into is it conflicts with WPaudio. The plugin will play the audio but when I have Peekaboo activated, I lose the load bar and formatting collapses. As soon as I deactivate Peekaboo, all is good again. It conflicted with another media plugin but I’m not worried about that one right now. Any suggestions?
David, I’ll do a test install and take a look, if you have the name of the other plugin as well, i can also review.
Actually, the other plugin is just fubar in our system – I deactivated more elements and it doesn’t work. It may be a complete coincidence with WPAudio and Peekaboo but that one, I disable Peekaboo and it works and enable it and it doesn’t -but not the whole functionality, just the CSS elements that display the load bar -which also places the Download link when it’s not visible.
hi Dimas, could it be that there are limitations to the amount of peekaboo actions used on one page? i have something like 70 items to open on a single page but after 36 WP doesn’t show the content anymore (sidebars are there).
i tried everything, copying the upper part of the list and the lower, with and without pictures, but after 36 the content doesn’t show. tried on 2 different installations of WP 304 on different servers.
it is a div problem. the header-line is a mixed text of which the 1st part is the peekaboo link (film title) and the 2nd just add. text (series). here is the line of code:
div class=”head-odd”>
[peekaboo_link name="t28"]Sea of Tears[/peekaboo_link](Under Suspicion) /divthe head class writes a colored background (100% of the line–not only the text–that’s why it needs to be a div)
again the problem: after a particular number of actions WP doesn’t put out the content.
any suggestions (even a hunch?)
Hi
What file do I open to modify the styles ?
I can’t find a css file.
@Kathy, there are no css files, but peekaboo will use custom css classes so that you are able to target elements and style them with your current themes css file.
@malik, my apologies for the late reply are you still having issues?
i suspect you have a new job, so no worries about the delay.
yes, the issues remain in place. but i just went on with what the circumstances offer …
but thanks for asking.
I’m wondering if Dimas has any thoughts on how one might go about tracking user clicks of Peekaboo links. I’d love to be able to track when a user clicks on a particular peekaboo.
Thanks for the great plugin.
But I’m having trouble adding more content to peekaboo action, similar problem as user “malik”. Is there a limitation on how many times the action being used? I only called up the action for 10 – 15 times. Or is there a limitation for peekaboo to handle the volume of the content?
Here is the link of the page: http://entechconsultants.com/wordpress/services/
That’s how much content I can added, whenever I added more content, WP will load a blank page.
Also, every first line of the peekaboo action will add an extra space in-between the first 2 lines. If I add another peekaboo action like, “Click to show all”, it become normal again. Look at the 2 sections, the bottom section without adding another peekaboo action, the line spaces in-between the first 2 line are totally off. Any suggestion??
Michael,
i know your pain. there is nothing i found to do away with the limitation of the number of pb actions. maybe this is a WP security issue.
conc. the extra space in the 1st pb action, yes i have had the same problem — but i don’t rem how i finally solved it because i was tricking around for too long.
what i can tell you is this: you have to be very careful with where exactly the peekaboo code tags are in you html (right before/behind, right in between one line and the next, prev./next line, etc.), plus, if the tags were really written correctly by WP (check for correct code opening and closing e.g.). don’t trust the wysiwyg editor in WP. go to the html.
if you finally come to a consistant spacing of all your pb actions and content, adjust the spacing with peekaboo_content, peekaboo_onshow and/or peekaboo_onhide css values, like, override the paragraphs that are created by pb with plus or minus margin values (which would be your line-height e.g.).
it’s a little bit of pain but you can find a workaround, maybe not exactly what you wanted (like it was for me), but close enough.
Thanks malik. Thanks for the tips, sound like we are on the same rocky boat. I never use the wysiwyg, I don’t trust it too. I’ve found a way to work around with the limitation so far. I don’t use the shortcodes, instead I used the html codes (class, div). So far I can fit in all the content without any problem. My client don’t want the “show all/hide all” before the content, and they don’t mind the extra spaces. That’s great.
malik, if you rem the trick to deal with the 1st pb, please pm me @ (wongmichael @ shaw dot ca). it’ll be handy to know how. I really like the plugin and will use it again. Thanks in advanced.
hi dimas,
thanks a lot for this plugin! It’s what i needed for creating a little gallery and beeing able to switch to text. Just having problems with the margin/padding, the big images are about 10 px down and the thumbnails start to jump to the right, when you click through:zentrale.cc/probeseite. I told every class of the peekaboo-divs and links: margin and padding:0px.
Do you have any idea why this happens? Thanks in advance!
Dimas,
A question and an accolade:
First, this plug-in is awesome, it is so user friendly (i’m not a designer or techie at all). thank you so much for creating and sharing it. I wish I would have found it sooner, I spent a couple hours looking for a plug-in that would “collapse” text . . . there are two other similar ones that use a form of the word collapse but neither of them work as well or as easily as yours . . . I stumbled on yours by accident as I was getting ready to give up at 1:00 in the morning.
Question, for some reason, I can get 9 peakaboos to work on one page but not 10, I’ve tried isolating the issue by changing names, moving the 10th one to a different position but no matter what, when I put a 10th peakaboo on the page regardless of name / content / position / etc… it takes the whole page and turns the Title into one big peakaboo and shows/hides all or none of the text on the page.
Do you have any ideas? I would love your help.
Thanks,
Kirk
Also, is there a way to adjust the spacing before / after each peakaboo? It’s adding ALOT of extra space on each one.
Thanks,
Kirk
scratch my first question, I’m sure you are all aware of how much I am not a techie by now . . . I was just playing around with it and figured I didn’t have enough space between one of the sections . . . when I put the peakaboos too close together, they lock up the page but when I space them out with a new line, they work, all 10 of them.
Still can’t figure out how to reduce the display page to have an even and lesser amount of space between each heading. If you have any ideas, would love to hear them.
Thanks again.
Kirk
I don’t understand why i can’t use this plugin 🙁
@Kirk, I will look into the issue of multiple items on a page and the spacing issue. If i find a suitable solution I will release a new version.
@prim, how can I help?
Hi,
I have a contact form used as the hidden content which works well. The problem I have is that I need to keep the hidden content on show once the form has been submitted and the page refreshes so that any form errors can be seen on the page. Hope you can help. Great plugin so thanks!
Hi, Terrific plugin!
but….when I put the shortcode around my text it no longer shows in the format or body text format that it was in.
My website address links to the page i’m working on now.
Couldn’t the plugin default to the CSS that the site is using?
Thanks!
Good plug in, I’m wanting to set the state of the hidden content that they cannot all be closed, basically if all is toggled closed show the start=”visible” content.
Thank you Wills
First and foremost, awesome plugin. I am running into an issue where when the text is shown, it expands and covers the page’s footer. The page doesn’t resize.
This is just what I am wanting but my brain doesn’t seem to comprehend the instructions. I am beginning to think that I am just too old to “get” this stuff!
I am afraid to get into all the stuff beyond what the pages look like so I usually muddle through with what I have. Do you have an instruction sheet for “Really Dumb” dummies since that is the category I fall into! Any help would be appreciated. I think I am just missing some things but am not sure where to add the stuff in the brackets. I still have no clue how to use most of the stuff on the Blackberry my husband got me, so now you know just how dumb I am! I can re-thread an 8-track tape though! LOL
I know I probably sound really stupid but I will be the first to admit it!
Thanks!
You rule. Many other show/hide plugins failed miserably in cross browser tests.
Yours works. You win. Well done.
I like the additional properties of the tag too. Brilliant.
I did get it working about 20 minutes after I wrote that I was too dumb to make it work! I absolutely love this and is so much easier than trying to make a script work for me. In less than a week I had all my sources posted and got my certification!
I agree with Krystal, this is awesome!
Thank you so much!
Summer
This is a great little plugin. Can the Peekaboo fields be used with select boxes or radio buttons? If so, is there an example of how the code should look?
First of all, Great plugin – really simple to use and works great.
But, this plugin used to work until I changed to multisite. I see that the shortcodes are translated to html tags properly but I can’t see the javascript include. Can you please advice?
Thanks in advance,
Ink
Hey, Im not sure if this is what this plugin does but Ill give you an example.
http://yellow.co.nz/search/christchurch/Real+Estate+Agents-1.html
Where it says ‘telephone’ you can click and it reveals the number.
Is this something the plugin could do? because if so we would defiantly be interested in using this for our directory.
Thanks
Michael,
Yes it will work for that. Just change the title for what you want. I used my stylesheet to create the division to be how I want it.
@Kirk I used the Disable WPAutop Plugin from http://urbangiraffe.com/plugins/disable-wpautop/ to disable WP’s default behavior of sticking line breaks everywhere and that took care of the spacing issue. I was beating my head against the wall until I realized that it was a WordPress problem, not a Peekaboo problem. Awesome plugin!
Hi, is there a way to have the hidden content default to the site’s stylesheet? It’s currently showing the hidden text in what looks like Courier and ignoring style tags. Thanks! Other than that – LOVE the plugin.
Heya, great plugin but I have one issue with it, as I seem to be having with all other solutions similar to hiding/showing content.
I have a section of the homepage posts that all say show/hide and the content generated in the hidden divs are unique to each post (I’m using a custom meta box to gather and output the data), so I need the show/hide in my template instead of using a shortcode. My problem is that when I click on one show/hide it opens all the hidden content. Is there some way to generate a unique ID that pertains to each instance?
I’m currently using the example above of the HTML output.
Thanks!
JH,
goes something like this:
“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.”
see above or the faq.
Hi,
I installed this great plugin that I really needed yesterday and I’m almost fully satisfied… but :
I tried to nest 2 [peekaboo_content] and I saw it didn’t work… the script stopped at the first closing [/peekaboo_content] instead of running to the good one.
Are you planning to change this behavior, or never had the idea ?
I think a workaround for me would be to use the html form… but it would be great if you could take a look at this.
Thanks!
Is there a way to do the following with your plugin?
item1
item2
item3
I click on item1 and it displays content1. I click on item2 and it hides content1 and displays content2. I click on item3 it hides content2 and display content3.
I figured it out, it is in the settings. It would be great if there was a way to show content based on the url like: page#thiscontent
WP 3.1.3, Peekaboo 1,1. Everything loads, but I receive a javascript error “css_class[0] is undefined” in global.js?ver=1.1 line 130.
Each time I click on the “show all” link the same error pops up, and none of my fields reveal themselves. Suggestions?
Found the solution. In your “example” code the first line:
[peekaboo onshow="Click to hide all" onhide="Click to show all"]
does not contain a name attribute. Adding one solved the problem.
Thanks for this plugin, It works well, just like I want
is there a way to do nested peek-aboo’s? IE
LINK 1 – displays content
PRICE LIST – displays four sections of price list that show/hide, too
LINK 3 – displays content
LINK 4 – displays content
?
It would be so nice if you can create a setting that replaces the “read more” thing with peekaboo…
Nice plugin!
I want to change the color of the links (peekaboo_link, peekaboo_onshow, peekaboo_onhide). I know that this are CSS classes but I don’t know where to define them like
peekaboo_onshow {color: black;}
Thanks for any help!
Peekaboo isnt working on IE 8 & 7. Please help.
The site is found here: http://www.bottarolaw.com/
Check out the RECEIVE HELP YOU DESERVE button.
Great simple plugin!
is there anyway to initially display 50% of the content instead of hide 100% completely ?
thx
I love your plugin. But I would like to remove this when viewing source:
var peekaboo_collapse_all = true;
I’ve tried adding many different things to my theme’s functions.php file, but none of them seem to work.
This should work, but it doesn’t. Can you help?
// Remove Peekaboo “peekaboo_collapse_all” print script except on FAQs page
function disable_peekabooscript() {
if (!is_page(‘faqs’) ) {
remove_action( ‘wp_print_scripts’, ‘do_wp_print_scripts’ );
}
}
add_action( ‘wp_head’, ‘disable_peekabooscript’, 1 );
Using it another website I’m working on.
Excellent! Thank you!
I can’t seem to figure out how to prevent all the links from opening up when you have multiple peekaboo links on a page… i see there is a function, but not sure exactly how to use it… is there any explanation on how to go about setting that up?
Just wondering if this plugin is still supported by the developer… If not I’ll need to find another plugin that allows for multiple instances on a page that don’t all open up at once upon show.
you have to assign a
nameto a block so that you can target it directly.Yes, you give each peekaboo its own name=””
So i mean, peekaboo name=”first”, and then the next one, name=”second”. Of course the names inside the quotes can be arbitrary.
I have a problem getting this to work.
Could you please help me?
(I just used your example to test)
Everything works fine in the normal Page view like here:
http://bergwerkarchitekten.at/wp/?projects=gemeindeamt-scheffau
But in the actually Layout nothing happens, see:
http://bergwerkarchitekten.at/wp/#gemeindeamt-scheffau
Thank you!
is there a way to put an embedded video in the content section?
well, it seems to work if i paste the code in the html editor outside of the peekaboo-ed sections and then drag the frame into the content area from the visual editor. the trouble now seems to be that sections hidden by default do not load the video, merely a black box :L
at/calsnoboarder
it doesn’t seem like. he’s been quiet for some time already.
and yes everybody, the plug-in works fine, just RTFM (which,ok, isn’t very well written–but you will fiddle it out). it embedds video too, because the video has nothing to do with the plugin. the video should be in the content you open with pkb.
there seems only one limitation and that is the number of openers you can use on one post. that number is somewhere around 40.
Peter
I don’t know very much about coding and all that stuff, but I did get my peekaboo to work the way I wanted so maybe this will help you.
I did not find the peekaboo items in the page (from link provided) that is not working so I grabbed the code from the page (from link provided) that is working and inserted into the source code where it should be and it worked in FF.
I hope you can get it working right for you!
technoc
Is this what you a wanting?
http://pain-and-depression.com/Library/?p=3395
I took the embed code for each of the videos and they worked on my test page. I used iframe and a different name for each block.
I really don’t know much about all this stuff so I hope this is what you are needing and solves your dilemma!
***Could you please assist me with that! ***
I have a problem getting this to work.
Could you please help me?
(I just used your example to test)
Everything works fine in the normal Page view like here:
http://bergwerkarchitekten.at/wp/?projects=gemeindeamt-scheffau
But in the actually Layout nothing happens, see:
http://bergwerkarchitekten.at/wp/#gemeindeamt-scheffau
Thank you!
-Peter-
Does this help you?
IMG 1:
[peekaboo name="img1" onshow="-" onhide="+"][peekaboo_content name="img1"]http://yoursite/img1.jpg
[/peekaboo_content]
IMG 2:
[peekaboo name="img2" onshow="-" onhide="+"][peekaboo_content name=img2"]http://yoursite/img2.jpg
[/peekaboo_content]
You can see the different ways I use it at these links:
http://pain-and-depression.com/Library/?p=3474 and
?p=232 and
?p=2929
I have changed the “+”or “-” to words on the second link “watch”or “close” as you can see.
You have to name each block a different name and identify that block to open – [peekaboo name="img1"] and [peekaboo_content name="img1"] like I have it set up above which you can copy and paste and change the img sources. Keep in mind that you must identify each image in both of the areas to call it up.
Summer
(I really don’t know a lot about his stuff, so once I figured it out I saved it to notebook and use the same setup just changing the images or information for each post.)
OK, i found out that the problem is the AJAX environment of my theme.
Is there a way to fix this!
PLZ HELP!
-summer-
Thank you very much for your help – but that did not fix the problem.
I contacted the designer of the theme i am using and he told me the problem might be the ajax loader my theme works with.
If you look at my links of the first page the peekaboo item is the little (+) below the images in both cases.
the first link is a standard wordpress project view and it works, the second is the embedded ajax content loader and it won’t do anything.
here the links again
http://bergwerkarchitekten.at/wp/?projects=gemeindeamt-scheffau
http://bergwerkarchitekten.at/wp/#gemeindeamt-scheffau
maybe someone with a little experience in ajax coding can help me!
thank you
Having an issue. not sure if this is possible. I want this
See more1
See more1.1
content
See more1.2
contet
end
I have try to write this with names and everything but it seems that See more 1 is picking up the end of see more 1.1
Eric,
Is this what you want? I just nested the code.
See More and more …
If so, I will send what’s behind the scenes!
It’s really pretty easy as long as you make the peekaboo name (=more) the same as the peekaboo_content name (=more)
and
peekaboo name (=more2) the same as the peekaboo_content name (=more2)
Summer,
I have worked around it but i still like the idea of doing this. I think we are both on the same page.
Like I explained. I want to have a category inside another category. Doing a section of stuff for sale. This is what it looks like
A.Safes
i. Elite Series
ii. Security Series
B. Blah Blah Blah
I can get the A and B section to work no problem. But when i try to make the i and ii section, they seem to take the properties of the A section.
I wanted to know if you can replace the word “Click to shoe / click to hide” an address to an image.
Then use OnShow = “http://www…..com/img.jpg”
I tried using custom fields to WordPress by inserting a value of “peekaboo_onhide_text,” the address of the image.
But the problem that we have to insert a page 3!
Sorry if my English is not perfect, but I hope that everything is clear! 🙂
Not sure if this question has been brought up, but is there a way to link from an outside page to a page including the peekaboo code and have an item displayed open (onshow)?
Hello,
How to use Google Docs Embed With Peekaboo
[gview file=”http://www.free-bucket.com/imranseries/Ibn-e-Saffi/001%20Khofnak%20Imarat.pdf”]
PLease Help me for this issue
Thanks
Hello,
please tell how can i use Peekaboo with google doc embeder
[gview file=”http://www.free-bucket.com/imranseries/Ibn-e-Saffi/001%20Khofnak%20Imarat.pdf”]
Please help me about this problem
I’m trying to use this plugin to display varied content on a page. I want to display one div or section of a page upon a navigation link click. I want to mimmic a new page, but with the same header and a slider that remains constant. I’ve got the following code to work on my site as a test (see code below). I have “collapse all other content…” set to “yes” so only one div or section displays at a time.
What I’d like to do is somehow hook this functionality up with my navigation on another part of the page so when one uses the navigation links it changes the content of the page. Ideally, I’d like to use images for that navigation.
Any help with this would be greatly appreciated!
[peekaboo name="top" onhide="link to top" start="visible"]
[peekaboo_content name="top" start="visible"]
content of top section
[/peekaboo_content]
[peekaboo name="middle" onhide="link to middle" start="hidden"]
[peekaboo_content name="middle"]
content of middle section
[/peekaboo_content]
[peekaboo name="bottom" onhide="link to bottom" start="hidden"]
[peekaboo_content name="bottom"]
content of bottom section
[/peekaboo_content]