Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer 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.

share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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