0

Is it possible to create a TinyMCE button and shortcodes to WordPress to enclose press releases in, so that they're hidden by default, but at the press of the button, they would expand to reveal the content? And then compress/hide again upon click?

Example: http://www.engadget.com/2011/02/11/tron-legacy-blu-ray-gets-a-release-date-supports-disneys-seco/

Doesn't have to be just press releases, obviously. It could be used to hide anything, such as a lengthy passage with spoilers, etc.

1

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.

  • Hey @Milo it seems you can to do WordPress+TinyMCE plugin dev? Any chance you could contact me via the link on my profile page? – MikeSchinkel Jun 22 '11 at 4:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.