Expand first item in Nested Accordion
I am considering implementing a nested accordion menu inside a hamburger menu, and want the first item to be open so to make people a little more conscious that you can expand the submenu.
Here is a sample that I like, but of course I want to customize it...
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
In that sample, I would want the page to load and "Group 1" to be expanded by default.
Prefer to do all of this just using HTML and CSS
35 Replies
considering that that's using the input + label hack, you can just have the first input be checked
I want to make it accessible. Someone showed me a way a few months ago, but I forget the specifics. I am just asking now more from a conceptual standpoint than getting into actual code. Just trying to figure out a design that works for me.
As I recall, the checkbox approach is NOT accessible, but there is a way to do it using pure HTML/CSS that is accessible and which works better
do you have anything more than an idea?
No, just working on design right now.
(Sorry I didn't keep the code sample someone shared with me - I hope I saved it somewhere?!)
that's not the problem
the problem is that you're asking for a solution for a concept
I have a super complicated website, and I am racking my brain trying to come up with something that workls on mobile and which looks good, is accessible, and which can ideally be coded using pure HTML/CSS with maybe a spinkle of JS
I asking conceptually if what I described is hard to do - not how you'd do it per se
conceptually, probably easy
So I can assume that I can do it?
yeah, in most cases, yes
Here is some more context...
On my hamburger menu I want to first have tabs like the WSJ uses...
But where you see th Sections above, I want to put in that green nested accordion
The first tab would be: "By Subject"
The second tab would be: "By Content Type"
Made up example...
Let's say the first tab has...
- Business
- Economy
- Tech
- Politiics
For the second tab, I will have the same section names - the confusing part - so I want to expand the first item (e.g. "Business") to show people that the sub-items are different. For example...
Business
- Written
- Audio
- Video
Follow me?
So that is why I am asking conceptually if I should be able to easily expand whatever my first parent item is in the nested accordion to help cue users to the difference without making them expand things, or get confused and think it is a duplicate to the first tab
Make sense?
conceptually, yes
that's the thing: conceptually
If I use HTML/CSS, is there some first-child thingy that you can style to expand the first item?
(My apologies for not having the accessible code sample someone shared last year. I probably lost some good code - but Discord is so hard to maintain concversations...)
depending on the implementation, you shouldn't need to use
first-childHow would I do it then?
that's impossible to answer
Btw, I am pretty sure somewhere on my hrd-drive I have a text file with notes and a URL to the code that avoids using the checkbox approach and which is 100% accessible. Not ready for that yet, but when the time comes, I think I can find it.
Not sure if you need that in order to answer if what I want is technically doable?
it would need to be more than a concept
even a demo would be enough
a demo of what you have in your head
Well I posted a screen shot of what I want
That isn't enough? You need a working demo?
i just need something more than a concept
for the example of the link you sent on top, it's just a matter of adding
checked to the first inputOkay, I will have to look for it. But I think I can find it eventually. And I will take away for now that I can likely do what I want.
it's very likely you can do what you want
Yeah, but I was told that is a bad, inaccessible code example - even though I like how it looks and works. A few months ago someone in Discord showed me a way to ge tht e look I want and be more user friendly. I just have to find my notes and the code
So I will remain encouraged then
And I will follow up here when I can get you some code and or a working online example
it is inaccessible
that would be amazing
It's a start!
Thank you
you're welcome
(I was good and posted another question in this forum!). 😉
i can't be more precise right now, without something "tangible"
as you should
imagine having this chat in #chit-chat while others talk at the same time
I will get back to you as soon as I can - still organizing my hard-drive and juggling 20 things at once
do what you need, take your time
As mentioned, every server is differnet and I have a hard time remembering where people want me to post. I will try harder to remember
it's fine, don't worry
If you have time, swing by front-end > "Replace Hamburger Menu with a Menu Page?"
🙂
This channel is for code-specific questions. If you want to just discuss ways of doing something, please use #discussions