MG 2.1 Expand Navigation Panel

dds115

Member
Is there a way to have my media categories always expanded so a user doesn't have to click the categories to see the sub-categories? Thanks for any help!
 
Doing this with Jquery, so less customized templates to have to maintain :)

Add this to to either PAGE_CONTAINER template before the closing </head> tag, or to the bottom of helper_js_global before the closing </xf:macro> tag to have it show up everywhere (Resource category lists, etc):
Code:
<xf:js>
    $(".categoryList-toggler, .toggleTarget").each(function() {
        $(this).addClass("is-active");
    });
</xf:js>

If you want it to auto-expand XFMG category lists only, you could add it to xfmg_media_index and xfmg_category_container.

You can also create a custom Style Property to control whether the groups start expanded or not. To do so, enable designer mode and create a custom value/boolean Style Property, say in XFMG: Appearance. After creating the property, change the code earlier to the following:

Code:
<xf:if is="property('myCategoryToggleProperty')">
    <xf:js>
        $(".categoryList-toggler, .toggleTarget").each(function() {
            $(this).addClass("is-active");
        });
    </xf:js>
</xf:if>

Then just change the name of the property above (myCategoryToggleProperty) to the one you created.

Let me know if this works for you!
 
Last edited:
Doing this with Jquery, so less customized templates to have to maintain :)

Add this to to either PAGE_CONTAINER template before the closing </head> tag, or to the bottom of helper_js_global before the closing </xf:macro> tag to have it show up everywhere (Resource category lists, etc):
Code:
<xf:js>
    $(".categoryList-toggler, .toggleTarget").each(function() {
        $(this).addClass("is-active");
    });
</xf:js>

If you want it to auto-expand XFMG category lists only, you could add it to xfmg_media_index and xfmg_category_container.

You can also create a custom Style Property to control whether the groups start expanded or not. To do so, enable designer mode and create a custom value/boolean Style Property, say in XFMG: Appearance. After creating the property, change the code earlier to the following:

Code:
<xf:if is="property('myCategoryToggleProperty')">
    <xf:js>
        $(".categoryList-toggler, .toggleTarget").each(function() {
            $(this).addClass("is-active");
        });
    </xf:js>
</xf:if>

Then just change the name of the property above (myCategoryToggleProperty) to the one you created.

Let me know if this works for you!
I'll give it a try in the morning and let you know, thank you for helping me!
 
No problem!
Sorry for another question, but when I click a media category or sub category all of the categories minimize again. When I just got to the media gallery it works as I had hoped. Is there a way to keep them always expanded even when in a category or sub category? I used the first code you posted into xfmg_media_index and xfmg_category_container , if that helps.
 
There is also another approach by editing the template (or use Template modifications).

Is there a way to keep them always expanded even when in a category or sub category?

In xfmg_category_list_macros:

FIND:
<ol class="categoryList toggleTarget{{ $isActive ? ' is-active' : '' }}">

REPLACE:
<ol class="categoryList toggleTarget is-active">

---

FIND:
<a class="categoryList-toggler{{ $isActive ? ' is-active' : '' }}"

REPLACE:
<a class="categoryList-toggler is-active"
 
There is also another approach by editing the template (or use Template modifications).



In xfmg_category_list_macros:

FIND:
<ol class="categoryList toggleTarget{{ $isActive ? ' is-active' : '' }}">

REPLACE:
<ol class="categoryList toggleTarget is-active">

---

FIND:
<a class="categoryList-toggler{{ $isActive ? ' is-active' : '' }}"

REPLACE:
<a class="categoryList-toggler is-active"
I appreciate it it, that worked, thank you very much!
 
This is useful, we have very long category names at the bottom level so in the navigation pane they get truncated to the point they are of no use. The plan is to stop the lowest level category from opening in the navigation pane so people look at the full category names list above the child category images. It would be best to remove the toggle at that level but preventing it from opening would do.
 
I've sorted it so that it no longer shows the toggle at category level 2 and doesn't show the level three categories in the navigation pane. Level three etc. categories are listed above the images and can be selected there.
 
Top Bottom