Jump to content

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

Recommended Posts

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!!


Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.