Streaming live at 10am (PST)

Drop-down accordion menu


#1

Hi guys,

I’m trying to implement accordion drop-down menu based on this tutorial https://webflow.com/website/accordion-menu-tutorial; and ideally it would have two states - initial and if any of drop-downs are expanded. In initial state background-color is grey and text color is black. When any of the menu items is expanded menu’s container gets background color from menu item and text color changes from black to white. With background color managed to change the background, but second property for text-color styling doesn’t pass…

$(".m-produkter.w-dropdown").click(function(){    
$(".drop-down-menu").css({'background-color':'#9a7566','color':'#ffffff !important'});
$(".dt-produkter.w-dropdown-toggle.w--open").css({'color':'#fff !important'});}); 

Another thing I would like to check somehow if all the menus are collapsed so to bring back initial state…

Here is my site Read-Only: LINK


#2

Im not sure I completely understand your question. From what I believe I understand it can be done without custom JS using vanilla IX or if you prefer IX2.0. if that is the case, then you can take a look and inspect accordion that i have made as a template for my projects.

If I am wrong, please ignore me, and Im sure someone will help you.

Webflow preview : https://preview.webflow.com/preview/kristaps-template?preview=3cce397233aa14aca53ba2adc0b952cc

Webflow live : http://kristaps-template.webflow.io/

Hope this helps!


#3

Sure, there’s a couple of ways to do. I chose IX1, because it was just easier at the time. Take a look at my collection page to see a Multi-level dropdown menu & Accordion menu:


#4

Hi! Indeed my question was about how to control the open-close state of the drop-down, but thanks anyway! :wink:


#5

hey looks cool! nice interactions :slight_smile:

one question - in the example you have over there with purple drop-down menus - is it possible to
check if all dropdowns are collapsed?


#6

Hey Thanks,
When you say ‘check if all dropdowns are collapsed’, you mean what?


#7

In this picture (menu on grey) define a state when all drop downs are closed…


#8

Oh okay, but defined, do you mean “which interaction tells when both are collapsed?”. If so, it’s in IX1 Legacy Interactions. Actually, this type of effect is better using IX1, than using IX2, and I haven’t quite figured out why, but it is. (I ran out of time)

In interactions 1.0 you can have multiple elements to use the same interaction in the list (so to speak). You’ll need to click on these, in the navigator, or click on text link then at the bottom, you’ll see the navigator list. Click the layer above which is Accordion Wrapper. Each is added to that same ‘Display None’:

Accordion Wrapper 1
Accordion Wrapper 2

Then in the interactions, it’s the ‘Accordion - Display None’.


#9

I found it doable actually in interaction 2.0 - it’s quite powerful with plenty useful customization options - really neat :slight_smile:

—> not the most elegant solution, but it works


#10

Awesome, cool! Glad I could help. Have fun.


#11

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.