Refer to the image 1. My demand is quite complicated so please bear with me.
First, when I want to click the menu in navbar, the image1 will show and the option for National Curriculum which ties in to the right column with Core Subjects, STEM Electives and Humanity Electives will be shown automatically at default.
When I want to hover to the International and Private, the Core Subjects, Stem Electives and Humanity Electives will collapse and will be replaced by IGCSE and IB MYP instead.
When I want to hover back to National Curriculum, Core Subjects, STEM Electives and Humanity Electives will reappear and IGCSE and IB MYP will collapse.
So far, what I did is actually, to toggle collapse for the right column by clicking the National Curriculum or International and Private. At default, all the options from the right column will be shown and only collapse when clicking the left item respectively which is not what the correct result. Apparently, Bootstrap 5 intentionally does not allow hovering option to activate the right column.
I have tried changing the display for the right column from none to block when clicking using css but nothing close to what I am expected.
To summarize, (1) I need to change from clicking to hover for National Curriculum, International and Private (2) I need to be able to show National Curriculum's right column (core, stem, humanity) at default and collapse it when hover to different link
If possible, I want to minimize the usage of css and js to achieve this. Thank you for your help.