I have a mega menu in the header of a site. It’s made with 4 bootstrap columns.
On desktop viewport sizes, I need the columns to display just as they are. On tablet and mobile, I need them to display as accordions. The <h6> tag, which is used at the top of each column, would be used to collapse/expand the accordions. What’s the best way to go about this?
1st I preface by saying I know NADDA about bootstrap. That being said, I want to lay out the complexity of what you ask.
First… are you SURE you want to use an h6, headers are NOT just for styling. Second they should be buttons… but… you only want them to be buttons on mobile. For accessibility, these buttons need to be associated to the content below (open / closed). This is something you do NOT want on desktop. Odds are, and this is just off the cuff thinking, you would want that trigger button only to show on mobile and hide the “normal” heading every where else.
This was a work in progress from a previous bootstrap forum question which may be of some use as it seems similar to what you want.
It still needs work.
It would probably help if you posted a demo of what you have already so that the JS experts around here can offer something better than my example 
I think that’s key.
I did have a bash at an accordion menu in vanilla js on here a while ago. I’m not sure how much use it is to you though.
https://www.sitepoint.com/community/t/dropdown-menu/357140
Working from PaulOB’s example might be more straightforward or alternatively going with a ready made script?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.