Temporary nested sections

[ghost]

I have section tabs already created, and I would like to created nested collapsible sections in each section tab. Could you please advise how I can do this as a temporary measure until you have a better way to do this.

Currently I have admin pages, then each admin page has a page tab. In each page tab, I have section tabs which I have made vertical tabs. In each section tab I would like to create 4-6 collapsible sections.

I hope my structure sounds correct.

[michaeluno]

I've uploaded an example plugin on Gist. https://gist.github.com/michaeluno/58ae5ec6404949397bd0

You may examine the code. What I've done is to set a custom property array to define section groups.

        // Define custom groups
        $this->aCustomSectionGroups = array(
            array( 
                'group_id'  => 'my_group_a',
                'title'     => __( 'Seciton A and B', 'admin-page-framework-test' ),
                'sections'  => array( 'my_section_a', 'my_section_b' ),
            ),
            array( 
                'group_id'  => 'my_group_b',
                'title'     => __( 'Section C', 'admin-page-framework-test' ),
                'sections'  => array( 'my_section_c' ),
            ), 
        );

And then generate a list element with group titles defined in the custom property array.

        private function _generateSectionTitleList() {

            $_aLists = array();
            foreach( $this->aCustomSectionGroups as $_iIndex => $_aGroup ) {

                if ( ! isset( $_aGroup['group_id'], $_aGroup['title'] ) ) {
                    continue; 
                }

                $_aLists[] = "<li>"
                        . "<a href='#{$_aGroup['group_id']}'>" // the href attribute will be assigned by a jQuery script.
                            . $_aGroup['title']
                        . "</a>"
                    . "</li>";

            }
            return "<ul id='custom_section_tabs'>"
                    . implode( PHP_EOL, $_aLists )
                . "</ul>"
                ;

        }

And inserted the following JavaScript in the footer.

jQuery( document ).ready( function(){

    var _oAPFContainer = jQuery( '#custom_section_tabs' ).parent();

    // Move sectionset elements into grouped containers
    jQuery( jQuery( {$_aSectionGroups} ).get().reverse() ).each( function( iIndex, aGroup ) {

        if ( ! aGroup.hasOwnProperty( 'group_id' )){
            return  true;   // skip
        }
        var _oSectionGroup = jQuery( '<div class=\"custom-section-group\" id=\"' + aGroup['group_id'] + '\"></div>' );

        if ( ! aGroup.hasOwnProperty( 'sections' )){
            return  true;   // skip
        }
        jQuery( aGroup['sections'] ).each( function( iIndex, sSectionID ) {    

            jQuery( '#section-' + sSectionID + '__0' ).closest( '.admin-page-framework-sectionset' )
                .detach()
                .appendTo( _oSectionGroup );
        } );
        jQuery( '#custom_section_tabs' ).after( _oSectionGroup );

    } );

    // Enable jQuery switchable tabs
    jQuery( '#custom_section_tabs' ).parent().tabs();
    // jQuery( '#custom_section_tabs' ).parent().createTabs();  // or use the framework method to create tabs

});

It is a quick dirty little hack so it is not recommended that you rely on this method entirely. The part which you need to watch out in this code is

jQuery( '#section-' + sSectionID + '__0' ).closest( '.admin-page-framework-sectionset' )

It tries to find a sectionset container element with the id of '#section-' + sSectionID + '__0'. This id structure may be changed in the future so I'll think about a more stable way to do this. Though the code should at least gives you some ideas of how to enable switchable tabs for the time being.

[michaeluno]

Closing due to inactivity.

[ghost]

Hi Michael, I have no idea how I missed this reply in the first place. Thank you for the workaround. I will try it to see how it does the nested sections.

You have mentioned it is a bit of a hack to make it work, but I remember you mentioned you are rebuilding the way the framework will be so that it can accommodate the idea better. I would happily pay the extension licence once this can be done natively as it will then make sense to develop the theme I have in mind that will need this type of function.