Idea: Toggle Section Content

[patrickf0]

Hi Micheal,

I came across a problem. Sometimes I have large lists in my meta boxes (such as checklists or sortable lists). A revealer section is a nice way to hide such a large list, but I do not always have a selection to be made.

So my idea is to be able to make a section as toggle in order to hide it and show the content only when its toggled open.

What do you think?

Or like an accordion (http://jqueryui.com/accordion/)

[ghost]

Patrick has been reading my mind this evening for sure. I came across a WordPress theme framework that had tabbed options and in each tabbed page was a selection of options that are already closed in an accordion fashion as Patrick describes above. And I was going to be asking this exact question tomorrow.

Here are some screenshots of a theme options using this type of scenario, and even has a button to expand all toggled sections.

What do you think of this scenario @michaeluno and @patrickf0

[michaeluno]

Interesting idea.

Let's say the user sets an argument in the section definition array for such styling. Then, what argument name would be appropriate? Would foldable work?

array(
    'section_id'    => 'my_section',
    'title'         => __( 'My Section', '...' ),
    'foldable'      => true,
),     

@cmwwebfx Okay, so you are adding the idea of the button that folds and unfolds all the containers at once. Maybe when there is a section that has an additional argument being enabled, the system adds such a button.

array(
    'section_id'    => 'my_section',
    'title'         => __( 'My Section', '...' ),
    'foldable'      => array(
        'is_folded'         => true,        // (boolean) whether it should be folded by default or not.
        'fold_all_button'   => true,        // (boolean) whether to display the button that folds/unfolds all the foldable containers at once.
    ),
),     

But this will be after the main functionality is implemented. Also you may suggest a better argument name for that if you have one.

[ghost]

yes, foldable for me works fine. An alternative would be toggle (toggle/toggled) or even collapse (collapse/collapsed/expanded).

array(
    'section_id'    => 'my_section',
    'title'         => __( 'My Section', '...' ),
    'toggle'      => true,
),

array(
    'section_id'    => 'my_section',
    'title'         => __( 'My Section', '...' ),
    'foldable'      => array(
        'is_toggled'         => true,        // (boolean) whether it should be toggled by default or not.
        'toggle_all_button'   => true,        // (boolean) whether to display the button that folds/unfolds all the toggle containers at once.
    ),
),

[michaeluno]

Indeed 'collapse' is another good word.

A few things.

• There should be an option argument whether the section container is already collapsed or expanded. What name should it be?
• Which is better toggle_all_button or show_toggle_all_button?

[ghost]

toggle_all_button should suffice. @patrickf0 any preference on this since you have opened this idea?

[patrickf0]

I would prefer shwo_toggle_all (is more consistent to show_title_column)?!

Other than that I´m fine with the idea! Nice Touch :)

[michaeluno]

I would prefer shwo_toggle_all (is more consistent to show_title_column)?!

That's what I thought.

Also there is the repeatable(for sections and fields) and sortable(for fields) arguments so the verb+able form may look more consistent. So foldable or togglable might be preferable to fold or toggle.

[ghost]

Thumbs up on the terms.

[michaeluno]

I've uploaded a test branch. Download.

How to use

Set the collapsible argument in the sections definition array. It supports the following arguments.

array(
        'title'                     => null,    // (string)  the section title will be assigned by default in the section formatting method.
        'is_collapsed'              => true,    // (boolean) whether it is already collapsed or expanded
        'show_toggle_all_button'    => false,   // (boolean) whether to display the button that toggles the folding state of all collapsible sections.
        'collapse_others_on_expand' => true,    // (boolean) whether the other collapsible sections should be folded when the section is unfolded.
    )
);

Example

            array(
                'section_id'        => 'collapsible_section_a',
                'title'             => __( 'Collapsible Section A', 'admin-page-framework-demo' ),
                'description'       => __( 'This section can be expanded and collapsed.', 'admin-page-framework-demo' ),
                'collapsible'       => array(
                    'show_toggle_all_button' => true,
                ),
            ),
            array(         
                'section_id'        => 'collapsible_section_b',
                'title'             => __( 'Collapsible Section B', 'admin-page-framework-demo' ),
                'description'       => __( 'The <code>is_collapsed</code> argument can determine the default state of whether it is collapsed or expanded.', 'admin-page-framework-demo' ),
                'collapsible'       => array(
                    'is_collapsed'     => false,
                ),
            ),
            array(         
                'section_id'        => 'collapsible_section_c',
                'title'             => __( 'Collapsible Section C', 'admin-page-framework-demo' ),
                'description'       => __( 'With the <code>collapse_others_on_expand</code> argument, you can set wether the other collapsible sections should be collapsed when the section is expanded.', 'admin-page-framework-demo' ),
                'collapsible'       => array(
                    'collapse_others_on_expand' => false,
                ),
            )     

If you find something wrong let me know.

Updated: 3.3.4b07+ changed the argument names from using the term foldable to collapsible.

[ghost]

This looks fantastic Michael, I cannot wait to test it out. I hope to have a crack at trying it Sunday night.

Do you have an idea on how I can unfold all just yet?

I am hoping this will not be something where I can only unfold one at a time like an accordion where one opens and the other closes.

[ghost]

My idea is to have them all folded to start with, and have one set to be unfolded if I need to like in the array 'is_folded' => false, if I need that. but most important will be to open all in the section that I am currently in.

I will be hoping to make 4-8 foldable sections per section tab that I have open, and a small trigger to expand (unfold) all the foldable sections within the active tabbed section that I currently have active.

[michaeluno]

I've found that the term fold is widely used to mean word-wrapping so I'm going to change it to collapsible.

Do you have an idea on how I can unfold all just yet?

Not yet implemented in the test branch. Let's make it possible to insert a button right/left above the section when the show_toggle_all_button argument is true.

My idea is to have them all folded to start with, and have one set to be unfolded if I need to like in the array 'is_folded' => false

I think it is already possible with the uploaded test branch. By the way. examples are included in the demo plugin. Check them out.

• Dashboard -> Admin Page Framework -> Built-in Field Types -> Sections.
• Dashboard -> Admin Page Framework -> Add New.

I will be hoping to make 4-8 foldable sections per section tab that I have open, and a small trigger to expand (unfold) all the foldable sections within the active tabbed section that I currently have active.

Due to the code structure, it seems to be very hard to achieve at the moment because the toggle bar (section title) needs to be placed outside the sections container and the problem is that section tabs are placed inside the sections container. Section tabs are dealt as sub-sections by the framework, meaning one tab is available per section, and this behavior is hard to change.

When this enhancement is settled, maybe we can expand the functionality to fields by making fields collapsible.

[michaeluno]

Updated the test branch (3.3.4b07). Now you can add the toggle all button. Also the argument names have been changed. See the above updated instruction for details.

[ghost]

Michael,

From the image I added of what I am wanting to replicate, the requirement of sub sections that are inside tabbed sections. We are not wanting to use in-page tabs since it is refreshing each time. The idea is to have section tabs inside sub menu pages, and then sub sections that are collapsible as per the code you have supplied above. (Image describing the scenario).

How can we use this code as sub sections?

[ghost]

BTW... please enjoy a small meal on me (just sent). I meant to send this on Saturday evening, but got distracted. I have yet to add the arrays to my sections, but realised this evening that my arrays are possibly an issue since we didn't see "sub section" documentation or how to do that.

[michaeluno]

The framework does not provide a means to create sub-sections manually. They are only created automatically when you set a repeatable section. Numeric index array keys are used for them and those keys are reserved for repeatable sections (and sortable sections for future implementation).

To create a method to set a parent section or nested sections, it will be another feature that requires to write additional code. And it's not something that can be done overnight. Post a new topic about it.

And to be clear, you are not talking about positioning section tabs vertically, are you? I suppose it's something you can do with custom CSS rules.

(And thanks for the donation again!)

[ghost]

Hi Michael, The image was just a breakdown of what I have in mind to build using the framework. The vertical tabs I have already done using custom CSS, so no issue there.

Nested sections are the correct terms that I could not think of. Instead I called them sub sections or even child sections.

With the image I added this evening, the section tabs are the vertical ones to the left of the main section. And yes the inner ones that are collapsible are as you have described being nested. I will create a new topic.

[michaeluno]

Now it supports repeatable sections and section_title fields.

A new argument named container for the collapsible argument has been added

array(
    'section_id'        => 'collapsible_repeatable_section',
    'title'             => __( 'Collapsible Repeatable Section', 'admin-page-framework-demo' ),
    'description'       => __( 'This section can be expanded, collapsed and repeated.', 'admin-page-framework-demo' ),
    'collapsible'       => array(
        'show_toggle_all_button' => true,
        'container'               => 'section',  // either 'sections' or 'section' Use 'section' for repeatable sections.
    ),
    'repeatable'        => true, 
)

@patrickf0 So is it good to go or were you expecting something different?

Update: Changed the name of the position argument to container.

[ghost]

Love the toggle all button. Very nice work on that.

[michaeluno]

The argument name position might be misleading so I'm going to change it to container.

@cmwwebfx thanks.

[michaeluno]

v3.4.0 has been released which includes this enhancement.

The show_toggle_all_button argument name was changed to toggle_all_button and it accepts positions to be set with the following values top-left, top-right, bottom-left, bottom-right.

Also there was a bug in the test branch that repeated collapsible sections could not be removed and it has been fixed.