Dropdown element to create a custom accordian issues working with different view ports


Using the Dropdown element to create a custom accordian with the webflow tutorial:

https://help.webflow.com/hc/en-us/articles/33961313037843-Create-a-custom-accordion#how-to-add-a-dropdown-element

I am using this to create a FAQs accordian but i need to have different heights on the closed accordian item to fit the text as it wraps down.

see example here: Patron

In the interaction panel you can only use drop down opens once so i cant have different interactions based on the viewport. by using the built in options below:

For example all i need to change is the height when accordian is close (inital sate and animated back on close to e.g:

  • desktop: 50px
  • Tablet: 70px
  • Large mobile: 90px

also I though i could have cutom code based on media quiries to chan ge the number by the view port but can’t find the js that this trigger is set.

any help much appreciated :slight_smile:

Hey @Richard_Atkinson ,

What happens when you add a second element trigger for ‘Dropdown opens’ in the Interactions tab?

I was just testing this use-case in a dummy site and I am able to select ‘Dropdown opens’ the number of times I need and am able to select the viewport settings for it as well and customize the interactions as per requirements.

Hope this gives you some idea.

1 Like

Thanks for looking into this… for me the dropdown option is ghosted out…

I think the complication is I had this as a component - and data coming from a CMS collection. I now see how it can be done outside of a component and a CMS collection - so should work as a none dynamic version and use classes function as a work around.

Thanks again.

1 Like