is there a way to create an accordion within an accordion?

Hi all,

I'm working on a services page and was brainstorming ways to show the plethora of services in a visually pleasing way and thought an accordion within an accordion would be great.

For example:

Adult Health - click to reveal

Chronic Disease Management and Urgent/Acute Visits - then you could click on both Chronic Disease Management and Urgent/Acute Visits to reveal each of those has a number of services.

Any help or suggestions is greatly appreciated 🙂

Thank you!!

Not with SS's accordion blocks.

In general the accordion effect works by some code "watching" for a click on a particular element (a plus or arrow) and revealing content until the next occurrence of a particular element. So for example the effect would work between heading 1 elements on a page. There may be other ways to do it but that is how I've seen it work with jQuery/Javascript.

Now if you start nesting accordions then your code has to deal with watching for heading 1 and heading 2 levels.

I'm wondering if the accordion is the best use case for your information. Would a standard HTML outline be a better model? With some Javascript magic to make each sub level of the outline show or hide. It's been awhile since I've looked at code for that kind of effect but I've seen it in the past.

Each type of code could work. You need to decide which would best fit your need.

Let us know what kind of effect you want and we may be able to point you in a direction.

I don't have any specific code myself for either of these effects.

@creedon Thank you so much for your response. I definitely think the accordion nested within an accordion may not be the best solution. Definitely am going to brainstorm some other options. Again, I really appreciate your help. I'll reach out once we dive deeper into what will work best 🙂

You can consider Accordion inside Tabs. Like this example (password: abc)