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
  • 2 years later...
On 7/15/2024 at 5:26 AM, MagicForestEmporium said:

This is a very old thread, but this looks like the perfect option for me to condense the large amount of info on my FAQ page, how do you achieve this?

You can use Tab Plugin (affiliate link)

However if you don't have a budget, we can use code to move Accordion Block into Accordion Block. Just share link to page where you added accordion & let me know which accordion you want to move, I will check and give you code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
12 hours ago, tuanphan said:

You can use Tab Plugin (affiliate link)

However if you don't have a budget, we can use code to move Accordion Block into Accordion Block. Just share link to page where you added accordion & let me know which accordion you want to move, I will check and give you code.

I found a way to create hidden page sections with the accordion blocks on them, and have the section above it being the "button" to open that section. So I labeled the sections as if they were the first accordions and clicking them both opens and closes the sections for easier navigation in the FAQ. With all my testing it works across all platforms I have. I'm pretty sure that's the way you're talking about?

You can look and see if it is what you are talking about. If it's not, this seems to work unless there's any issues you know about doing it this way. Website page: https://magicforestemporium.com/faq Password: test123

Actually I have one question with this setup, how can I move the arrows on the sections to be on the right side like the accordion blocks below them?

Edited by MagicForestEmporium
Had a question I forgot to add
Link to comment
On 7/17/2024 at 4:19 AM, MagicForestEmporium said:

I found a way to create hidden page sections with the accordion blocks on them, and have the section above it being the "button" to open that section. So I labeled the sections as if they were the first accordions and clicking them both opens and closes the sections for easier navigation in the FAQ. With all my testing it works across all platforms I have. I'm pretty sure that's the way you're talking about?

You can look and see if it is what you are talking about. If it's not, this seems to work unless there's any issues you know about doing it this way. Website page: https://magicforestemporium.com/faq Password: test123

Actually I have one question with this setup, how can I move the arrows on the sections to be on the right side like the accordion blocks below them?

You can use this code to Custom CSS to move arrows to right

x-twc-psst {
    margin-left: auto;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.