Priority Support

If you’re a Pro user, please open a support ticket.

Notifications
Clear all

Nested accordion question

Posts: 6
Topic starter
(@kingcraigo)
Active Member
Joined: 4 weeks ago

Hello. Before I purchase the pro version, I would just like to check something. I want to build a nested accordion on my site with 3 levels. There would then be text links below the 3rd level. Something like:

 

Number

  • Fractions
    • Basic fractions
    • Adding fractions
    • etc
  • Decimals
    • Ordering decimals
    • Operations with decimals
    • etc
  • etc…

Algebra

  • Equations
    • Linear equations
    • Quadratic equations
    • etc
  • Graphs
    • Straight line
    • Quadratic
    • etc

etc

 

I want everything to be collapsed when the page loads, so just Level 1 (Number, Algebra, etc) is visible. I can do this. But then when someone expands A Level 1 table like Number, I just want it to expand to Level 2, so the user would see Fractions, Decimals, etc. What is happening at the moment is all fields are opening at once, Levels 2, 3 and text.

 

https://tipsforteachers.co.uk/test-page-for-accordion/

 

This is no good as eventually I will have 100+ Level 3 toics plus a load of text links in each one. I want the user to be able to brwlse Level 2, and then click into the one they want.

 

Is there any way to avoid this?

 

Thanks!

9 Replies
Posts: 48
Admin
(@istiak)
Member
Joined: 6 years ago

You can use the Collapsed option and also decide which panel to be opened by default. 

Reply
Posts: 6
Topic starter
(@kingcraigo)
Active Member
Joined: 4 weeks ago

Hello

 

Thanks for your reply. But that is not quite what I am after.

 

I love the collapsed state when the page opens because I want my users to be able to see all the Level 1 topics. But when they select the Level 1 topic of their choice, I want it to open all the Level 2 topics nested underneath it, without also opening all the Level 3 topics at the same time.

 

Does that make sense, and is it possible?

 

Thanks again

Reply
Posts: 6
Topic starter
(@kingcraigo)
Active Member
Joined: 4 weeks ago

I have done a mock up on this page: https://tipsforteachers.co.uk/test-page-for-accordion/

 

Number, Algebra and Geometry are all Level 1

 

When I click on Number, I want just the associated Level 2 headings displayed (Fractions, Decimals), but as you will see it opens those levels nested underneath Fractions and Decimals). This will make navigation really difficult when I add more and more topics.

 

Is there an option to have a collapsed initial state when the page opens because I want my users to be able to see all the Level 1 topics. But when they select the Level 1 topic of their choice, I want it to open all the Level 2 topics nested underneath it, without also opening all the Level 3 topics at the same time? And have this on desktop and mobile?

 

Thanks again

Reply
Posts: 48
Admin
(@istiak)
Member
Joined: 6 years ago

Do you want to make accordions look like this (check attachment) when an user clicks on the ‘Number’ panel?

Reply
Page 1 / 2

Special Limited Time Offer - Get 20% Discount

X
Need help?