How can i achieve this?

I want to make a table with more than one level of nesting rows, each parent with a mark to expand the children of the next level. But only one “section” can be expanded at once, the other must collapse before so.

I’ve left attached a pdf with the illustration.

Can you help me? Thank you.

Hi there,

Welcome to the forums :slight_smile:
Depending on your level of JavaScript proficiency, maybe something like jExpand would help.
This is a jQuery plugin that bills itself as “an ultra lightweight jQuery plugin that will make your tables expandable.”

If this more or less does what you need, I’m sure it wouldn’t be too hard to add the additional functionality after that.

Hi, thank you for respond. I’ve tried jExpand but it didn’t suit with i’m needing. It just works with 2 levels of nesting. I need to go beyond that.

Hi Dave,

I’m still asleep, so bear with me…

  1. Are you looking to create the rows dynamically (from an array/object) or are they simply hidden?
  2. you want the first click on the “+” to open all “ST2” counties? and the 2nd click to open the towns?