Accordion List Differentiated

Hello everyone,

I’m trying to create a list with subcategories (in 3 levels), and i found a very nice model on the internet with 2 levels, but I have not found anyone that had three levels, for exemple:
001 - DAD
001 001 - SON
001 001 001 - GRANDSON
001 001 002 - GRANDSON 2

Look, this exemple of 2 levels accordion list:

Someone know, how can i insert a third level?

and more … it would be possible to put the accordion to only open when clicked on the icon? and if i click in the content of accordion, open a link… Its very important to me

@malex @Ben @brandyshea @LeftyX @mhartington
can you help me guys?

I helped someone on StackOverflow with the same issue.
The answer is here.

Hello @LeftyX, thanks for your reply…

I see the link, and i found one of your solutions which is on the way, but needs some tweaking to solve my problem …
Him have the subcategories, but when i open, the grandchildren (third level), can not be clicked individually… When click in anyone, make the accordion close, and i need put a link in anyone.
Other problem is the question about the icon… I need to open accordion only if clicked on icon, because in the ‘name’ of accordion, will have a link.


Sorry @danielpt but I don’t have time at the moment. Really busy with some projects I am working on.

ah, ok @LeftyX , sorry for the inconvenience hehe …
if you have a little time and want to help a guy, I shall be very grateful, I’m desperate about it …

thanks for your regard…

You need to make a new ion-list for the grand children… Your putting them in the header to toggle the parent.

1 Like

@A_Burgess can you help me do that?

1 Like

Great buddy @A_Burgess , work fine!
But i need make to open the accordion only in icons, and in the name, open the link… You know how can i?

Because I need to do a category system, where we can open the father category, or i can click on icon and filter through sons categories, understand?

Sorry @danielpt I have a deadline to meet with the app I am working on so can not create the solution for you, however all you should need to do is adjust the markup a bit.

Ah… Good job hehe… I’m newbie, i’m working on this for one week and not have success =(
When you have a free time, and can help a brother, i will be greatful… Thanks a lot.

Maybe this?

Work!! Its possible to make this on the first level? i.e. on the fathers accordions?? @vicmota

Yes, just follow the same pattern.

I just thought it would be a bad user experience to toggle the parents at the icon only.

Will be =(, but need this. Its hard to do buddy?

To make a better experience, i’ll maximize the click area of icon…

Or better… I have a good idea @vicmota… Will solve this problem…

Make to only open the link if click in the ‘‘name of accordion’’, if click in other way, will open the accordion…

What u think?

Yea, might be better.

The problem now is, how to do that! haha :disappointed_relieved:

Set the icon’s padding-left to some value, like 64px.