Skip Navigation

[Resolved] Accordion – keep active section expanded

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 1 reply, has 2 voices.

Last updated by Nigel 5 years, 5 months ago.

Assisted by: Nigel.

Author
Posts
#1329369

I would like to keep the active section of my accordion menu open when one of the items inside this section is selected.
E.g. section 2 contains 3 links ( d, e and f). When one of the pages d, e or f is selected the menu section 2 should remain expanded. Now it collapses when I click any item.

Is there any documentation that you are following?
https://toolset.com/forums/topic/split-displaying-terms-in-accordion-style-list-with-embedded-view/#post-956562

What is the link to your site? hidden link

#1329457

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Hugo

I checked how you have this on your site and then set up a local test site to check what is required to get this working.

As I said, you want to conditionally add the collapse classes depending on whether the current category from your View loop matches the category assigned to the post where this View is being displayed.

There isn't an existing shortcode that you can use to output the taxonomy assigned to the post where the View is shown (and, in any case, you have hierarchical categories and the parent is also assigned).

So we need to register a custom shortcode to output the child category assigned to the post where the View is shown, like so:

/**
 * Shortcode to output the child category assigned to the current post
 */
add_shortcode('current-cat', function () {

    global $post;

    // get current category
    $categories = get_the_category( $post->ID );

    $categories_copy = $categories;

    foreach ($categories_copy as $key => $category) {

        if ( $category->category_parent == 0 ) {
            unset ($categories[$key]);
        }
    }

    $categories = array_values( $categories );

    return $categories[0]->slug;
});

You'll then need to register this "current-cat" shortcode so that it can be used as an argument in conditional statements, at Toolset > Settings > Front-end Content. (See https://toolset.com/documentation/user-guides/conditional-html-output-in-views/using-shortcodes-in-conditions/)

And then in your taxonomy View to loop over categories, where you add the collapse classes you need to wrap those in a conditional shortcode, something like:

<div [wpv-conditional if="( '[current-cat]' ne '[wpv-taxonomy-slug]' )"]class="collapse"[/wpv-conditional]>

So the collapse class in this example is only being added to the div when the current category in the View is not the same as the child category assigned to the post where this View is shown.

Can you try to reproduce this on your site and let me know how you get on?

As an aside, I notice you are using Types 2 which is no longer supported, I recommend you update all of your Toolset plugins to the latest versions.