CSS help with a custom horizontal accordion build

Ask the community
,
1

I have managed to create an interactive horizontal accordion-style section (based on the first 25 mins of this YouTube video) and I need to tweak it so that two things happen (hopefully!!)…

1. I need the first menu item to be expanded as default, so when scrolling to that section it’s more obvious to users that it’s interactive.

2. I need ‘.menuItem’ to stay at 560px on hover (expanded) and then collapse back to 120px on click, instead of hovering off.

The containers have been built with max-content width hence the nice flowing movement, I just need to have the option of them all open at once, or two, etc.

I am using Wix Studio, using the below CSS:

.menuParent {
    overflow: hidden;
}

.collapsed {
    display: none;
}

.menuItem {
    width: 120px;
    transition: width 0.5s ease;
}

.menuItem:hover {
    width: 560px;
}

.menuItem:hover .collapsed {
    display: block;
}

I am not particularly well-versed in code yet, but have been asking chatGPT to tweak it, but have had no success. Any help is hugely appreciated as it’s driving me crazy – it may be a very easy fix, or it might not be possible!

My working site is here, please scroll to ‘Our approach’ and you will see the accordion with image interactivity – https://amycarmann.wixstudio.io/deep-discovery

Thank you!

2

It looks like you’re looking for professional support with modifying your site. Try either the Collaboration section of the forum or https://www.wix.com/marketplace for paid support.