Need a plug in or code to add expandable content on a single page WordPress

Pippin Williamson answers:

I've done this in a plugin of mine already. Check out [[LINK href="http://demo.pippinspages.com/announcements/announcements/new-features-planned/"]]http://demo.pippinspages.com/announcements/announcements/new-features-planned/[[/LINK]] for an example.

Click on "Additional Details".

I'd be happy to code you a quick plugin for it.

enodekciw answers:

The easiest way to do it, imo, would be using jQuery.

Just load your content inside some hidden div, and make it slideDown when some arrow or other element is clicked.

Michael Fields answers:

Here is an article that describes how this can be done:
http://www.bluelimemedia.com/2010/10/19/hidereveal-content-on-wordpress/

christine rondeau answers:

Thanks Michael, you beat me to it.

Victor Teixeira answers:

Hi, you have two options:

1- create a custom post type called 'bios' or anything else, install the simple custom post type archives plugin, create a template for this custom post type archive where you can make the html as a definition list like <dl><dt>name</dt><dd>biography text</dd><dt>name</dt><dd>biography text</dd>...</dl> and using jquery you can make the bio appear and disappear with a slide effect.

2- You can make everything inside a page by just using an appropriate markup like: <h4>name</h4><p>bio text</p><h4>name</h4><p>bio text</p>... and use jquery to control everything.


If you want, I can send you the quote to code everything for you.

Bouzid Nazim Zitouni answers:

I wrote a plugin to do the trick

- an admin panel page to add bios, edit, or delete them

- a basic way to show the added names in a page or a post.

If you select me as the best answer, I'll help you modify the plugin to match your exact need.

Please download here http://www.filefactory.com/file/b4304e7/n/Wordpress_Authors_list.zip

Good luck

Nick Parsons answers:

These are some great solutions that the other experts have suggested, but if you're looking for some plug 'n play code so you don't have to mess around with trying to figure out plugins, here's a quick, elegant solution (Add this to functions.php):

function expanding_script(){
echo "<script type='text/javascript'>jQuery(function(){jQuery('.expanding-box-handle').click(function(){jQuery(this).next('.expanding-box').slideToggle();});});</script>";
}
add_action('wp_footer','expanding_script');

function show_expanding_box($atts,$content){
$box = "<strong class='expanding-box-handle'>" . $atts['title'] . "</strong>";
$box .= "<div class='expanding-box' style='display:none;'>" . $content . "</div>";
return $box;
}
add_shortcode('expanding-box', 'show_expanding_box');

What this does is add a shortcode that you can use to wrap your content. You can now use the shortcode in your page like this:

[expanding-box title='Demo Expanding Box']This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.[/expanding-box]

Only the title ("Demo Expanding Box" in the example) will be displayed, and when it is clicked the content will slide down.

The only thing left is to add a small triangle image (like http://www.lazard.com/Images/arrowDown.jpg) to the images directory of your theme and then add a line to style.css:
.expanding-box-handle { cursor: pointer; padding-left: 25px; background: url(images/FILE_NAME_OF_ARROW_IMAGE) no-repeat; }

Hope that helps!

Edit: And a quick note, this uses jQuery so you'll need to make sure that your theme is loading it. Most do already, but if yours doesn't you can add it real easily by putting this in functions.php:
function add_jquery(){
wp_enqueue_script('jquery');
}
add_action('init','add_jquery');