Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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


A client wants a feature similar to one found on this page:

where you click on the small arrow next to a name and it expands to show a short bio of the person. We will want to be able to add names and bios to the list via admin if at all possible rather than recoding the page content each time they want to modify it. - This will be in a wordpress "page"

Is there a plugin that would allow this? Should a plugin be developed? Is the answer a css based only solution with "visible" and "hidden" attributes? Let me know the best solution and easiest to implement and edit.

Given time I could search out solutions/plugins, javascript or whatever is needed but the job is a rush and they want the entire site designed, installed and populated inside of a week so I'm hoping you can help make this happen.

Will revise prize amount if this appears to be a larger job than anticipated.

<strong>Wow</strong>... You guys just jumped right on this. Definitely worth every penny in the time saved. I will defintely use you again.

Answers (8)


Monster Coder answers:

You can check this out:


Pippin Williamson answers:

I've done this in a plugin of mine already. Check out [[LINK href=""]][[/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:


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

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>";

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 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(){