Accordion to the next level

User 2796380 Photo


Registered User
94 posts

I am using RFF and added accordion component. What I need is the ability to have sub-accordion inside "accordion 1" or 2 or3. etc. Example: Main Accordion (accordion 1) to be "Blood Pressure". Clicking on Blood Pressure will open and provide many sub-accordion like "BP=80", BP=100, BP=120", ............... Clicking on any sub-accordion will open giving answer.

It appears I need to be able to put an accordion "List Item Container" inside the "Accordion 1" "Container". Would someone in detail explain the How To? This problem is keeping me from changing my existing web site to Responsive.
Larry Penny
User 379556 Photo


Registered User
1,533 posts

I have done it as follows.

1. I created a simple accordion in a column i.e.
(a) I opened the Content > Components panel.
(b) On the main canvas I selected the column in which I wanted the accordion to appear.
(c) I clicked on the plus (+) sign at the left of the words 'Simple accordion'.

2. By clicking on the magnifying glass icon at the top right I opened the Inspector panel , which showed under the column in question the following:
List Container, Text Link, Container (with an 'open' symbol at the right), Heading, Paragraph.
I clicked on that Container (with an 'open' symbol at the right) to select it.

3. I clicked on the Content icon at the top, then on the word 'Components', and then on the plus (+) sign at the left of the words 'Simple accordion'.

Frank
User 2796380 Photo


Registered User
94 posts

@Frank
That does not do it. That method just adds 3 more below the first group. I need it to be added inside the hidden part. What I need is the ability to have sub-accordion inside "accordion 1" or 2 or3. etc

Also how do you keep accordion 1 from default open position? When previewed I don't want it to be open unless you click on the accordion link.
Larry Penny
User 379556 Photo


Registered User
1,533 posts

Regarding the last question above -
(a) In the Attributes of the List Container I add Data Allow All Closed and give it a value of 'true' (without the inverted commas), and
(b) for the List Item Container I delete the Is Active class.

When I follow the steps mentioned in my last post, I find that the second accordion is indeed a sub accordion within the first item of the first accordion. Is it perhaps possible that the last sentence of my item 2 was overlooked, or the wrong container selected?

Frank
User 2796380 Photo


Registered User
94 posts

@Frank
Thanks I will give it another try.
Larry
Larry Penny
User 2796380 Photo


Registered User
94 posts

@Scott,
Would you explain more about only 3 containers deep. When you add the accordion component even though there are 3 accordions with each having 1 container that only count as one deep is that correct? If so then you mean adding a sub-accordion would be 2nd deep and adding another sub-accordion inside the sub-accordion would be the 3rd deep. Is this correct?
Larry
Larry Penny
User 2796380 Photo


Registered User
94 posts

The reason I could not get it to work I found I had a List Container on top of Column. After removing and following your instructions with the second part included steps (that was missing in first reply) it seems to be working great.
Looking at file tree with the "Inspector" it appears I am only 2 Containers deep.

Thanks for the help,
Larry
Larry Penny

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.