Only show toggler in case there is data

sim24

Link to test case: https://jsfiddle.net/6mkj0874/

Description of problem: I have a responsibe table with optional fields, meaning that some TD will be empty. I would like to only display the collapse toggle when there is data to show (1st row in the example), but hide it in case there is no data to display (2nd row in the example) Is there an obvious way to do that ?

colin

That's not possible, I'm afraid, the '+' will always be shown. You could modify the responsive.details.renderer to not show that data, that's easily done, but the collapse toggle would always be visible.

One option perhaps would be to always display the hidden data, but using the method above to not display those empty columns. In this example, it's doing something similar, not displaying with "London" in the office column,

Colin

Larisabrownb

I would like to only display the collapse toggle when there is data to show (1st row in the example), but hide it in case there is no data ...I am trying to get only one data-toggle to show at a time.

The filter extension has multiple options like category, size, category, colour, etc.The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an ...The data-target attribute takes on a CSS selector to add the collapse to. Ensure to incorporate the class collapse to the collapsible element.Use true to show the element or false to hide it. Note: The event handling suite also has a method named .toggle(). Which one is fired depends on the set of ...

allan

@Larisabrownb - I presume this is GPT generated text, because it reads like a mash up of questions and answers? Link removed as it doesn't link to a test case.

Allan

sim24

I found a hacky way to do it : Going through the table and checking whether each element has a child or not, and if not, hide the '+' via CSS. Imperfect, but does the trick.

Illustrated here :
https://jsfiddle.net/02hmraz9/