Is conditional output in accordion possible?

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to show and hide certain accordion panels and their corresponding headers depending on conditional logic

Solution: It's not currently possible to surround entire accordion panels in conditional code, but you can use custom JavaScript and CSS to show and hide as necessary. Use conditional HTML output to place an element with a known CSS class in the panel. Target parent elements' classes and use .remove() as needed.

// example
jQuery('.hide-panel').closest('.panel').remove();

This support ticket is created 6 years, 12 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
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 7 replies, has 2 voices.

Last updated by pierreV-2 6 years, 12 months ago.

Assisted by: Christian Cox.

Author

Posts

May 23, 2017 at 1:48 pm #527528

pierreV-2

I am trying to: to use a conditional output in an accordion. I have a custom post type which has a field (brand/services offered) which only applies when "type-of-organisation"=retail.
I have an accordion with various fields displayed (contact, map, brand,...). I only want to have the brand & services offered tab displayed when the organisation is retail as for other organisations this will be empty.
I've used the conditional output elsewhere but don't see how to use it in this case (not in the field but I don't want the tab/accordion to appear if it's empty).
So far I've kept it outside the accordion but it doesn't look as good.

Thanks!

May 23, 2017 at 9:17 pm #527694

Christian Cox

Hi, it's not currently possible to wrap an entire panel in a conditional. Could I see the accordion on your site? I might be able to provide a workaround based on JavaScript and CSS. Please let me know where I could view it and I will take a look. Thanks!

May 24, 2017 at 2:38 am #527744

pierreV-2

Thanks Christian for your reply.

You can find my accordion at hidden link

The last 2 tabs are conditional (for them to appear, type-of-organisation needs to be "retail" and obviously the tab itself not empty).

Is it possible with CSS to have different colours for each header in the accordion? I'd like to have 6 headers in a gradation of a colour.
Thanks!

May 24, 2017 at 1:59 pm #527970

Christian Cox

I would need to take a look at your wp-admin area as well, I need a bit more information. Can you provide login credentials for me in the private reply fields here? I won't make any changes yet, I will just investigate. Thanks!

May 25, 2017 at 6:44 pm #528536

Christian Cox

Okay I'm confident I can get the last two accordion panels to disappear when the type of organization is "retail" and the panel is empty. I'll need to do the following things:
- Add unique CSS classes to each of the panel elements
- Add some JavaScript that tests the type of organization and shows or hides the appropriate panels

In order to apply different colors to each header, we can use those unique CSS classes. However, I'd rather handle that in a separate ticket since the solution is more complex than just a few sentences.

So if it's okay with you, I'll go ahead and add the CSS and JavaScript to this Layout. Then we can do a quick review. Let me know and I'll get started. Thanks!

May 25, 2017 at 8:10 pm #528565

pierreV-2

Please go ahead! I'm looking forward to the results.
I've just added a second type-of-organisation (health) which can offer a "service", so (if that doesn't make it too hard), I would want :
for header "brand" to appear, the type of organisation needs to be "Retail" and the content of the field "not-empty"
for header "services offered" to appear, the type of organisation needs to be "retail" or "health" and the content of the field "not-empty".

Once I know the css classes for all tabs, I could add the css myself. I'll raise another ticket to find out how to differentiate the various CSS classes.
Thanks!

May 25, 2017 at 10:09 pm #528607

Christian Cox

OK a bit of bad news - it's not possible to use WYSIWYG values in conditional clauses, unfortunately. So I can't include that part of the logic to show and hide the services offered panel. If you want to include a separate custom field that indicates whether or not to show the services panel, I can help you integrate that.

However, the rest of the logic has been implemented and is ready for you to review. You may use the following CSS selectors to target the toggle header elements:

.fusion-toggle-heading.toolset-accordion-panel-about-us
.fusion-toggle-icon-wrapper.toolset-accordion-panel-about-us
.fusion-toggle-heading.toolset-accordion-panel-how-to-contact-us
.fusion-toggle-icon-wrapper.toolset-accordion-panel-how-to-contact-us
.fusion-toggle-heading.toolset-accordion-panel-where-we-are
.fusion-toggle-icon-wrapper.toolset-accordion-panel-where-we-are
.fusion-toggle-heading.toolset-accordion-panel-map
.fusion-toggle-icon-wrapper.toolset-accordion-panel-map
.fusion-toggle-heading.toolset-accordion-panel-brands
.fusion-toggle-icon-wrapper.toolset-accordion-panel-brands
.fusion-toggle-heading.toolset-accordion-panel-service
.fusion-toggle-icon-wrapper.toolset-accordion-panel-service

You have separate selectors for the "+" icon and the text block.

May 27, 2017 at 5:25 am #529065

pierreV-2

Thanks, Christian.

This is perfect and great, you've been a great help!

I'll manage the css myself.

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.