I coded this up quickly, based on Scribu’s writeup on script loading, might work for you or provide a starting point.
The plugin file:
<?php
/*
Plugin Name: MO_expander_shortcode
*/
class MO_expander_shortcode {
static $add_script;
function init() {
add_shortcode('moexpander', array(__CLASS__, 'handle_shortcode'));
add_action('wp_footer', array(__CLASS__, 'add_script'));
}
function handle_shortcode($atts, $content = null) {
self::$add_script = true;
// this is the part that formats the markup with your content.
// change it however you like, just be sure to update the js and css files to reflect changes.
return '<div><a href="#" class="moexpander">expand</a></div><div class="moexpander">' . $content . '</div>';
}
function add_script() {
if ( ! self::$add_script )
return;
wp_register_script('mo-expander-script', plugins_url('mo-expander-script.js', __FILE__), array('jquery'), '1.0', true);
wp_print_scripts('mo-expander-script');
wp_register_style('mo-expander-style', plugins_url('mo-expander-style.css', __FILE__));
wp_print_styles('mo-expander-style');
}
}
MO_expander_shortcode::init();
the mo-expander-script.js
file:
jQuery(document).ready(function(){
jQuery('div.moexpander').hide();
jQuery('a.moexpander').click(function(){
jQuery(this).parent().next('div.moexpander').slideToggle();
return false;
});
});
the mo-expander-style.css
file:
.moexpander{
/* style as you wish! */
}
Use:
Put them all in a folder in your plugins directory and then activate it via the plugins page.
Then in the editor, enclose whatever content you want hidden as follows:
[moexpander]Some text here which will be hidden in a div with a link to toggle it open/closed[/moexpander]
You can add as many instances on a post as you wish. I’ll have to look into adding the TinyMCE button later, I haven’t done that before.