Artiss Content Reveal
Artiss Content Reveal allows you to easily hide and reveal WordPress content, whether it's in the sidebar or in a post or page.
Description
After searching for a method to hide content in my own site's sidebar I found that most of the solutions involved using widgets (which often provide less functionality compared to their direct function call equivalents). As well, they often make use of Scriptaculous, jQuery or mooTools to provide effects, but often add complexity and bloat.
I therefore wrote Artiss Content Reveal (formerly Simple Content Reveal) - it doesn't use any fancy effects, just some simple JavaScript. And it doesn't use widgets. A simple click on a heading causes content below to hide or reveal itself. You can add a button image too to indicate what state it is in (collapsed or revealed).
The plugin has been designed to fallback gracefully if the visitor doesn't have JavaScript installed (all text is revealed and any button images are removed). The output should also be XHTML compliant - although use of the short code can break this, depending on how it's used.
To see it in use please visit my website - I use it on the sidebar and for comments under individual posts or pages.
There are 2 ways to use the plugin - a function call (requires PHP coding, but can be placed anywhere) or a short code (which can be easily placed in a post or page).
Let's go through each of the methods in turn...
1. Function Call
For those with access to their theme PHP, a function calls adds total flexibility as it can be added anywhere within your theme.
You need to add a call to the relevant function twice - one before the content that you wish to hide/reveal and then again at the end of the content. You only specify parameters for the first one.
<?php content_reveal( heading, id, default, imageurl, extension, cookie, title1, title2 ); ?>
Where...
- heading - This is the heading that you click on to hide/reveal the content below. It can contain HTML. If you wish a button image to appear within the heading then you need to add
%image%within the heading, where you wish it to appear. A default button is included with the plugin, but this can be overridden using further parameters. Additionally, if you wish the heading text to change as the content is hidden or revealed then you can specify the title text as%title%. There are 2 further parameters where you then specify the 2 pieces of text. - id - You can have multiple reveals on the same page but each needs its own unique ID - keep this short.
- default - Do you want the content to be hidden or shown by default? Specify
hideorshowto indicate (default ishide). - img_url - If you wish to supply your own images you can specify your own folder here. The two images (one for when the content is hidden, another for when it's shown) must be named image1 and image2. They can either by GIF or PNG images.
- ext - Use this specify whether you wish to use PNG or GIF images.
- cookie - How many hours to retain the cookie for - see the instructions on cookies for further assistance.
- title1 - If you wish to switch the title text, dependant on states, then this is the text that appears when the text is hidden.
- title2 - This is the text that will appear when the text is shown.
Only the first parameter is required.
So, for example...
<?php content_reveal( '<h2>%image% Some Blah Content Below</h2>', 'id1' ); ?>Blah, blah, blah content here<?php content_reveal(); ?>
This will display a heading, complete with image and hide the content below it (between the two function calls). It has been given an ID of id1.
The following shows the title being modified...
<?php content_reveal( '<h2>%image% %title%</h2>', 'id1', '', '', '', '', 'Click to reveal', 'Click to hide' ); ?>Blah, blah, blah content here<?php content_reveal(); ?>
Plugin Checking - Please Note
If you place a plugin check around your function calls, bear in mind that you will need to output the heading (if appropriate) if the function doesn't exist. So, using the example above you'd need to do this...
<?php if ( function_exists( 'content_reveal' ) ) { content_reveal( '<h2>%image% Some Blah Content Below</h2>', 'id1' ); } else { echo '<h2>Some Blah Content Below</h2>'; } ?>
Blah, blah, blah content here
<?php if ( function_exists( 'content_reveal' ) ) { content_reveal(); } ?>2. Short Code
This is used just like the function call and has the same parameters - the short code is [reveal]. You can either use the start and end shortcode method or, like the function call, you can simply use the same short code twice to encapsulate the content, only specifying parameters for the second one.
So, here's the previous example as a short code...
[reveal heading="<h2>%image% Some Blah Content Below</h2>" id="id1"]Blah, blah, blah content here[reveal]
Or you can specify it as...
[reveal heading="<h2>%image% Some Blah Content Below</h2>" id="id1"]Blah, blah, blah content here[/reveal]
Important: Make sure you add this using the html/code editor in WordPress, not the visual editor. In new versions of WordPress, just click the 'html' button above the edit box. If you use the visual editor it will not work, as the actual code you entered will be seen on the page, instead of being processed by the script.
For help with this plugin, or simply to comment or get in touch, please read the appropriate section in "Other Notes" for details. This plugin, and all support, is supplied for free, but donations are always welcome.
Show title separately
If you wish to show the title separately from the hidden/reveal text then an alternative function and shortcode is available. Both the function call and the shortcode is named reveal_link. It uses the same parameters as before.
To get this to work you must specify your text as usual BUT give it a heading of "noheading". For example...
[reveal heading="noheading" id="id1"]Blah, blah, blah content here[/reveal] [reveal_link heading="<h2>%image% Some Blah Content Below</h2>" id="id1"]
This is the same example as previously uses BUT the text to hide/reveal appears BEFORE the title.
In previous use the ID does not need to be specified - if it isn't, one will be generated automatically. However, for this method to use both IDs must match and, hence, you must specify them.
URL parameter to change the default state
A URL parameter named acr_state can be used to override all content on the page which uses this plugin. There are 3 possible values - show, hide or off. The latter will cause the plugin to output as if it wasn't active - all content will be shown and toggle images will be suppressed.
Licence
This WordPress plugin is licensed under the GPLv2 (or later).
Support
All of my plugins are supported via my website.
Please feel free to visit the site for plugin updates and development news - either visit the site regularly or follow me on Twitter (@artiss_tech).
For problems, suggestions or enhancements for this plugin, there is a dedicated page and a forum. The dedicated page will also list any known issues and planned enhancements.
Alternatively, please contact me directly.
This plugin, and all support, is supplied for free, but donations are always welcome.
Installation
- Upload the entire
simple-content-revealfolder to yourwp-content/plugins/directory. - Activate the plugin through the 'Plugins' menu in WordPress.
- That's it, you're done - you just need to add the function call or short code!
Frequently Asked Questions
I can't get a shortcode within the Content Reveal shortcode to work
Sorry, shortcodes within the hide/show text cannot be processed.
The output doesn't validate correctly
This will probably be if you are generating your output using the shortcode.
Usually, JavaScript generating HTML will cause errors, so you can use CDATA instead to suppress this. However, WordPress (for fuzzy reasons) modifies the CDATA command so that it no longer works.
However, this is under investigation and, it is hoped, will be fixed in WordPress in the future. When this happens I'll be able to update this plugin to use CDATA and to play nicely with validators.
How can I get all the content to display so that it can be printed?
Using the new URL parameter acr_state you can re-display your page with all content hidden, revealed or with the plugin switched off. See the instructions for further details.
Which version of PHP does this plugin work with?
It has been tested and been found valid from PHP 4 upwards.
Please note, however, that the minimum for WordPress is now PHP 5.2.4. Even though this plugin supports a lower version, I am not coding specifically to achieve this - therefore this minimum may change in the future.
Changelog
1.0
- Initial release
1.1
- Enhancement: Now using
wp_enqueue_scriptto handle script in header
1.2
- Bug: Fixed critical bug that prevented image from working with Internet Explorer
1.2.1
- Bug: Fixed bug where users own image folder was not working
- Bug: Fixed version number reporting
- Enhancement: Improved number of CLASS' used to assist with CSS styling
2.0
- Maintenance: Renamed from Simple Content Reveal to Artiss Content Reveal
- Maintenance: Brought all code up to current standards and checked via WP_DEBUG
- Enhancement: Modified default icons - now black & white to suit more sites
- Enhancement: Added button to editor which can be toggled in new option screen
- Enhancement: JavaScript cookies will now store the state of each section - again, can be switched via option screen
- Enhancement: Added parameters and URL to allow overriding of cookie option
- Enhancement: User can now specify the title separately, allowing option to hide/reveal to be placed elsewhere
- Enhancement: Improved shortcode method
- Enhancement: New URL parameter which allows all sections to be shown/hidden en-masse. Can also switch off plugin operation using the same
- Enhancement: If user doesn't specify an ID one will be generated for them
2.0.1
- Bug: Fixed a bug in the JavaScript that meant that not all cookie data was saved in some circumstances
2.0.2
- Bug: Fixed parameter passing bug in function call
- Bug: Corrected URL in HTML comment
- Bug: Fixed incorrect function name call in JavaScript
- Enhancement: Made a number of small improvements to the JavaScript
- Enhancement: Updated Artiss dashboard widget & added sponsorship to options page
- Enhancement: Improved editor button icon
2.0.3
- Maintenance: Removed the sponsorship

Known Bugs
View the Roadmap for Artiss Content Reveal
View the Change Log for Artiss Content Reveal
Planned Enhancements
View the Roadmap for Artiss Content Reveal
View the Change Log for Artiss Content Reveal

















Copyright © 2000-2012
Artiss.co.uk is checked by
Hello,
When activating this plugin my theme stops working. I can still see everything that is written but the theme does not load properly. Is there something I need to add to my theme to make it work?
Thanks,
Alex
Simply activating the plugin shouldn’t make a difference – the only thing it does is allocate the shortcode and add a link to the JavaScript at the top of your page. When activated, can you see the JavaScript call in your HEAD section? It should point to simple-content-reveal.js.
Hello and thankyou for your fast reply,
I had a look at the HEAD section of the header.php file but there have been no noticebale changes after the plugin is activated. I also searched for simple-content-reveal.js but found nothing in the header.php file.
Thanks,
Alex
Actually, an update on what I said before. After activating the plugin and checking the homepage source code, I can see the call to that file. I have activated the plugin and will leave it on temporarily.
Thankyou,
Alex
hi,
perfect plugin, exactly what I needed.
could you tell, is there any way to use “more+” and “more-” words to extend and to return slide.
I understand that “more+” will go as first value in simple_content_reveal (…), but where to put “more-”?
thank you.
At the moment there’s only the option to use an image – having the option to have words that change to indicate the hide/reveal state is something I can slate for a future release!
Hi,
Could you please write how to use hide/reveal images, like you have in your sidebar, if I use function call method (popular tags, archives, categories)?
thank you.
no need to answer on previous question, already found solution on your wordpress.org page.
have other issue: I use simplest function call (with default image) in index.php. When I enter webpage image works fine, but when I try to hide/reveal the slide, images crashes and on its place I see red cross + words “Hide/reveal text”, however slide still works?
thanks.
hi and thank you for the plugin!
Short code works nicely for me, I have one question:
would it be possible to CLOSE a previousely opened segment when another segment on the same page is opened?
thanks and greetings, karl.
This is something I will look at in the future but due to each collapsible section being independent, the result may be restrictive (or not easily achievable).
Hi, I love this plugin, it’s EXACTLY what i was looking for – the only thing is that the spacing is really funky – how do i customize the look? where is the css file?
The plugin doesn’t use any styling – I assume you’re using the shortcode method, as that’s the way to introduce “funky” spacing. Shortcodes are really designed to be use mid sentence and, therefore, seems to chop off any HTML tags at the very beginning and very end of the code in-between them. The best thing to do is to check your code source – I suspect this will be the issue. If it helps, I have the same problem and simply find that not using paragraphs around the shortcode helps.
Hi!!
Nice plugin you have made.
But i was woundering how i do to use it in the sidebar?
Like you have.. Have you done it like hard code?
Would be super if you could post the code to implement it in to a sidebar.
// Göran
I use the function version of the plugin (see the instructions above on using the simple_content_reveal function)
Hi !
Thanks for the plugin, I’ve been looking for such a plugin for many hours…
I just have a question : is it possible, with this plugin, to add easily a smooth effect when the content is revealed ?
It would be possible for me to add it, but it’s not my intention to. I’m using simplicity in this plugin to create it bloat free. I’d probably end up using JQuery or equivalent to achieve what you’re after.
It would be awesome if you could do something like that ! I tried myself, but I’m not good enough in Javascript and others…
I love it, except for the life of me I can not get the %image% to go to the left of the header text. It’s above it…Any ideas?
Assuming you’ve done it in the same way as my examples (e.g.
"%image% Some Blah Content Below") then I’d suggest that the problem is with your stylesheet – either the image or the H2 is causing it to behave unpredictably. If you need to modify the results both the DIV around the content and the IMG both have unique IDs which you can specifically style (look at your source to find these).If you place an example on your site and send me a link I can find the cause easier for you.
Hi David,
This is just what I have been looking for and works well from where I have seen it but unfortunately I cant get it to work on my set up?
I have installed and activated the plugin and set the short code on the page I am setting up on a new site. I can see all the content including the + image but all the content is open with no activity or ability to close it?
Regards
Peter
Peter – can you provide me with a URL of a page on which this is happening? It’s usually theme or other plugins clashing that causes issues.
Hi David. Great plugin! But I keep getting an error message when using IE. It only shows up after using the plugin to reveal the content.
Message: Object required
Line: 1
Char: 230
Code: 0
URI: /wp-content/plugins/simple-content-reveal/simple-content-reveal.js?ver=3.0.1
I can’t recreate your problem – it works fine with IE for me.
Can you let me know which version of IE you’re using and direct me to a URL of where I can see the problem occurring? Lastly, can you confirm which code you’re using to call my plugin?
Thanks.
Great plugin! I have a question though: would it be possible to hide/show content based on user role? I want to use this plugin to hide/show ads for some new roles I created (Member1, Member2, ect.)
That’s best done at the time you call Simple Content Reveal. So, for instance…
if (current_user_can('edit_plugins')) {simple_content_reveal("%image% Some Blah Content Below","id1");}Obviously, you’d replace the role with one appropriate for your circumstance.
Hi David – wonderful, simple plugin. I have a question though: I cannot figure out how to stylize this. Is there any way to add a CSS class to this for my stylesheets?
Thanks!
I’ll be improving this for the next release of the plugin.
Thanks David – I got around this by just wrapping it in a DIV class and styling it separately. Does the trick – though I do have a bit tricky of a time adjusting some of the innards.
Excellent plugin! I must tell you though- it works perfectly with my contact form shortcode from Fast Secure Contact Form. This is exactly what I was looking for. Thanks so much! Now to figure out how to align my image in the center instead of floated left…
Hi I love this but i want an image to trigger the show. So that when my image is clicked, text will appear. How do i do this. This code doesn’t seem to work?
Thanks
Hi – the code you supplied didn’t appear. Feel free to send it me via the contact form.
Hi David
I’ve just started using your plugin. I want to dynamically allocate a new ID to multiple instances on the same page and I’ve been trying to use the_ID() to do this (in templates). Unfortunately I can’t get it to work (probably my weak PHP skills). All I see is either the Post ID printed on the page or it just doesn’t work.
Is what I’m attempting possible?
This is something that gets me often too. the_id() will print out the result, not return it. You need to use get_the_id().
Ah cool. Just got it working with:
<?php simple_content_reveal("%image% Report change in information",get_the_ID()); ?>Nice one!