I have several metaboxes in the edit screen.

I would also create another metabox where the user can click on a checkbox then it hides a set of metaboxes, similar to the Screen Options functionality, only when the checkbox is clicked, it hides/toggles a group of metaboxes.

Does anybody know how to approach this? If not, what’s the code used by the Screen Options menu that dictates on click,hide metabox. ?

Thanks.

Post Views: 2

1 comment

The toggling boxes part is easy enough, that i can manage, but saving the status of the boxes is more tricky. JS unfortunately is not one of my strengths, and i can’t get the postboxes to save their state. That said, i can show you how to toggle groups of boxes, and adjust the checkboxes accordingly, i’ll post this in the hope that someone else can fill in the missing links to get the post box states to update(else when you refresh or revisit the screen, groups of boxes you’ve toggled visibility for won’t have remembered their state).

HTML for the toggle links

<p>
    <a class="metabox-group" id="group-1" href="#">Group 1</a> | 
    <a class="metabox-group" id="group-2" href="#">Group 2</a>
    <span class="hidden" id="meta-group-1">commentstatusdiv,commentsdiv</span>
    <span class="hidden" id="meta-group-2">categorydiv,tagsdiv-post_tag</span>
</p>

The spans need not be spans, you can of course use inputs or whatever you like to hold a comma seperated list of the boxes to toggle(a list of their IDs).

jQuery/JS for toggling

<script type="text/javascript">
    jQuery(document).ready(function($){

        // Attach a click function to links with the metabox-group class
        $('a.metabox-group').click(function(){

            // Find the element containing a list of elements to hide and split into array
            var box_group = $('#meta-'+this.id).text().split(',');

            // Ensure there's at least two items to toggle
            if( 2 > box_group.length )
                return false;

            // Loop over the pieces(the array of element IDs)
            $(box_group).each(function(){

                // Find and store the associated checkbox
                var toggle_checkbox = $('input#' + this + '-hide');

                // If the checkbox is currently unchecked
                if( !toggle_checkbox.is(':checked') ) {

                    // Show the metabox
                    $('#'+this).show();

                    //if ( $.isFunction( postboxes.pbshow ) )
                        //postboxes.pbshow( this );
                }
                // Else
                else {

                    // Hide the metabox
                    $('#'+this).hide();

                    //if ( $.isFunction( postboxes.pbhide ) )
                        //postboxes.pbhide( this );
                }
                // Toggle the checkbox 
                $(toggle_checkbox).attr('checked',!toggle_checkbox.is(':checked'));

            });

            //postboxes.save_state(page);

            return false;
        });
    });
</script>

The postbox code you see in there is commented out as it doesn’t work(had hoped it would), i’m simply not JS knowledgable enough to know what i’m missing on that front, but i’ve left it there so others in a position to help can see what i’ve tried.. 😉

Sorry i couldn’t give a complete answer, but i hope that helps all the same.. 🙂

On click hide group of metabox, similar to screen options checkbox?