Posted by theflightrs on Wed, Apr 02, 2025 - 8:38am --- Updated: Apr 02 '25 - 8:41am

Hi, 

I'm trying to use Views Accordion as a primary menu like the one in the Lateral theme, but the parents are taxonomy terms and children are pages. When i reference more than one page to a term, then the parent gets duplicated, holding the second page etc, so the children never get stacked under the same term.  

I created a Github issue with some more details, so i'm looking forward to know if this module is right for that purpose since it is based on a field order in Views. I also wonder why the Lateral'menu does not expand/collapse on click?

Edit: I am using Nice Menus for a top menu, but it does not have that indented dropdown style for a left sidebar.

Accepted answer

In the View, under Format, click Settings next to where it will say Views Accordion for you:

Set grouping field Nr.1 to be the Taxonomy Term: Name

Comments

Wed, Apr 02, 2025 - 9:02am by yorkshirepudding

If you set 'Use aggregation' to 'Yes' then they should group to avoid duplicates.

This in in your view settings

Wed, Apr 02, 2025 - 9:17am by theflightrs

Tried it, still the same. I made the website public for a second, so you can see that left menu.

Wed, Apr 02, 2025 - 9:25am by yorkshirepudding

Please can you share your View settings.

Copy it here putting it in a code block with Javascript set

Wed, Apr 02, 2025 - 9:28am by theflightrs

Sure: 

{
    "_config_name": "views.view.projects_menu",
    "name": "projects_menu",
    "description": "",
    "tag": "",
    "disabled": false,
    "base_table": "taxonomy_term_data",
    "human_name": "Projects Menu",
    "core": "1.30.1",
    "display": {
        "default": {
            "display_title": "Default",
            "display_plugin": "default",
            "display_options": {
                "query": {
                    "type": "views_query",
                    "options": {
                        "disable_sql_rewrite": 0,
                        "distinct": 0,
                        "pure_distinct": 1,
                        "replica": 0,
                        "query_comment": "",
                        "query_tags": []
                    }
                },
                "access": {
                    "type": "role",
                    "role": {
                        "anonymous": "anonymous",
                        "authenticated": "authenticated",
                        "editor": "editor",
                        "administrator": "administrator"
                    }
                },
                "cache": {
                    "type": "none"
                },
                "exposed_form": {
                    "type": "basic"
                },
                "pager": {
                    "type": "none",
                    "options": {
                        "items_per_page": "0"
                    }
                },
                "style_plugin": "views_accordion",
                "row_plugin": "fields",
                "fields": {
                    "name": {
                        "id": "name",
                        "table": "taxonomy_term_data",
                        "field": "name",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "label": "",
                        "exclude": 0,
                        "alter": {
                            "alter_text": 0,
                            "text": "",
                            "make_link": 0,
                            "path": "",
                            "absolute": 0,
                            "external": 0,
                            "replace_spaces": 0,
                            "path_case": "none",
                            "trim_whitespace": 0,
                            "alt": "",
                            "rel": "",
                            "link_class": "",
                            "prefix": "",
                            "suffix": "",
                            "target": "",
                            "nl2br": 0,
                            "max_length": "",
                            "word_boundary": 0,
                            "ellipsis": 0,
                            "more_link": 0,
                            "more_link_text": "",
                            "more_link_path": "",
                            "strip_tags": 0,
                            "trim": 0,
                            "preserve_tags": "",
                            "html": 0
                        },
                        "element_type": "",
                        "element_class": "",
                        "element_label_type": "",
                        "element_label_class": "",
                        "element_label_colon": false,
                        "element_wrapper_type": "",
                        "element_wrapper_class": "",
                        "element_default_classes": 1,
                        "empty": "",
                        "hide_empty": 0,
                        "empty_zero": 0,
                        "hide_alter_empty": 1,
                        "link_to_taxonomy": 1,
                        "convert_spaces": 0
                    },
                    "title": {
                        "id": "title",
                        "table": "node",
                        "field": "title",
                        "relationship": "nid",
                        "group_type": "group",
                        "ui_name": "",
                        "label": "",
                        "exclude": 0,
                        "alter": {
                            "alter_text": 0,
                            "text": "",
                            "make_link": 0,
                            "path": "",
                            "absolute": 0,
                            "external": 0,
                            "replace_spaces": 0,
                            "path_case": "none",
                            "trim_whitespace": 0,
                            "alt": "",
                            "rel": "",
                            "link_class": "",
                            "prefix": "",
                            "suffix": "",
                            "target": "",
                            "nl2br": 0,
                            "max_length": "",
                            "word_boundary": 1,
                            "ellipsis": 1,
                            "more_link": 0,
                            "more_link_text": "",
                            "more_link_path": "",
                            "strip_tags": 0,
                            "trim": 0,
                            "preserve_tags": "",
                            "html": 0
                        },
                        "element_type": "",
                        "element_class": "indented",
                        "element_label_type": "",
                        "element_label_class": "",
                        "element_label_colon": false,
                        "element_wrapper_type": "",
                        "element_wrapper_class": "",
                        "element_default_classes": 1,
                        "empty": "",
                        "hide_empty": 0,
                        "empty_zero": 0,
                        "hide_alter_empty": 1,
                        "link_to_node": 1
                    }
                },
                "filters": {
                    "vocabulary": {
                        "id": "vocabulary",
                        "table": "taxonomy_term_data",
                        "field": "vocabulary",
                        "value": {
                            "projects_categories": "projects_categories"
                        }
                    }
                },
                "sorts": {
                    "weight": {
                        "id": "weight",
                        "table": "taxonomy_term_data",
                        "field": "weight",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "order": "ASC",
                        "exposed": false,
                        "expose": {
                            "label": ""
                        }
                    }
                },
                "title": "Projects Menu",
                "style_options": {
                    "grouping": [],
                    "row_class": "",
                    "default_row_class": 0,
                    "row_class_special": 0,
                    "use-grouping-header": 0,
                    "row-start-open": "none",
                    "collapsible": 1,
                    "animated": "swing",
                    "animation_time": "300",
                    "autoheight": 1,
                    "event": "click",
                    "fillspace": 0,
                    "navigation": 1,
                    "clearstyle": 0,
                    "disableifone": 0
                },
                "relationships": {
                    "nid": {
                        "id": "nid",
                        "table": "taxonomy_index",
                        "field": "nid",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "label": "node",
                        "required": 0
                    }
                },
                "use_ajax": true,
                "group_by": 1
            }
        },
        "block": {
            "display_title": "Block",
            "display_plugin": "block",
            "display_options": {
                "query": {
                    "type": "views_query",
                    "options": []
                },
                "block_caching": "-1"
            }
        }
    }
}

Wed, Apr 02, 2025 - 10:24am by yorkshirepudding

In the View, under Format, click Settings next to where it will say Views Accordion for you:

Set grouping field Nr.1 to be the Taxonomy Term: Name

Wed, Apr 02, 2025 - 10:58am by theflightrs

On top of that, i turned on "Use group header as the Accordion header" like:

 

Excluded the taxonomy term

 

Now:

Another important setting: No autoheight 
(it would make all child areas as big as described here:)

 

Now it needs some fine CSS corrections, but generally, a great answer! I will try it now and see if it is solved. :-)

Wed, Apr 02, 2025 - 11:04am by yorkshirepudding

Glad to hear it helped

Wed, Apr 02, 2025 - 11:08am by theflightrs

I think this is good enough. Thanks for the surprise, @yorkshirepudding!

Here's the CSS i use for future references. (Works on black, very minimal): 


/* ========== ACCORDION ========== */ 

.views-view-accordion .ui-state-default {
    background-color: transparent;
    color: #000;
    border: 0px solid;
}


.views-view-accordion .ui-state-active a, .views-view-accordion .ui-state-active a:link {
    color: #808080;
    font-weight: normal;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
    color: #808080;
    text-decoration: none;
    font-family: monospace;
    font-size: 18px;
}

.ui-widget-content, .ui-widget-content a {
    color: #808080;
    font-family: monospace;
    font-size: 18px;
}

.ui-widget-content {
    border: 0px solid #dddddd;
}


.ui-accordion .ui-accordion-content {
    padding: 5px;
    border-top: 0;
    overflow: hidden;
    background: black;
}

.ui-icon {
    display: none;
    vertical-align: middle;
    margin-top: -0.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-accordion h3.ui-accordion-header {
    overflow: hidden;
    background: transparent;
    border: 0px solid;
}

Wed, Apr 02, 2025 - 11:40am by yorkshirepudding

Thank you for sharing your final solution.  This may be very helpful for future visitors trying to do the same.