i did this in 5 minutes:

http://screenr.com/RGD

what you think?

nice

Yep, that’s cool, man

awesome!

I’d be thrilled to see how you hacked wp for this!

Awesome, can you share

So useful Roberto!

Can you please share how you did that?

Loved the idea

Realease that as a WP plugin on CC to be honest! You should rack the sales up!

Ok, thanks, realy is very easy to do. I use only jQ and some css.

First you need to ensure to enqueue js and css only and just ONLY for the widgets page, and run js only and just only for that DIV items. If no widget page, and if no DIV , no js will be called.

That´s the most important thing in order to not cause any conflict between the rest of the wp admin files and scripts.

So i have a js and a css for that part enqueued in to admin, something like this:

global $pagenow;
if (is_admin() && $pagenow === 'widgets.php'){
    wp_enqueue_script('custom_js_for_widgets', THEME_OPTIONS_URI . '/js/pp_meta.js');
    wp_enqueue_style('custom_css_for_widgets', THEME_OPTIONS_URI . '/css/pp_meta.css');
}

The above, is on admin and on widgets page, do the enqueue.

Then, on the widgets page you have mainly two areas:

widgets-right

widgets-right > .widgets-holder-wrap (this can be opened or closed)

widgets-right > .widgets-holder-wrap / #[widget-slug-name]

1. is the ID widget takes from the name you put when registering the widget sidebar area.

So, let´s say you have a widget sidebar called “my-new-sidebar”, well, in order to access that item you need to call this way:

$t('#my-new-sidebar').parent().addClass('widget-cian');

Doing that what we are doing is adding the .widget-cian class to the parent .widget-holder-wrap. Just because that´s the parent widget dragable entire DIV .

Doing that, you can colorize any widget. But also you can then selecte or not it, this way:

$t('#widgets-right .widgets-holder-wrap:not(".widget-cian")').hide();

That code will tell jQ to hide all widgets but not the cian ones… That´s the basics on how i made the Expand Collapse and the Show/hide thing.

Also i prepend some html (links and text) on the very widget right area using jq:

var rightDiv_html = "";
$t("#widgets-right").prepend('<a href="#" id="expand_div">Expand All</a>');

And of course then i tell the #expand_div to do the function:

$t("#expand_div").click(function(){
        $t("#widgets-right .widgets-holder-wrap.closed .sidebar-name").trigger('click');
        return false;
    });

That´s the expander, i tell all widgets to trigger a click on the sidebar-name, that´way i expand all.

Note the .closed class.. I need to trigger them only if they are closed, because in this case i want to expand all, and if widget is already opened i do not need to trigger the click function. When widget is opened it just don´t have the .closed class.

I do same, using not() and the widget-color class assinged, to trigger click and hide.

I do some hide() or show() to hide or show all “orange” or all “cian” ones.

Well, that´s the basic idea, i don´t have time to post the entire code and explain it step by step, but i´m sure if you have a minimal knoweldge on the wp core and some jq, that´s all you need.

Enjoy

Thanks a lot for the hint in the right direction!

Its a loooot more fun to figure the rest out by myself!