Mimic Dropdown Function with Interactions

Design help General
1

I am trying to build a dropdown using divs and interactions because the dropdown element doesn’t wrap text on long lines on mobile.

I want it to function like a dropdown element does:

  1. The “open” state of the toggle is different from the “closed” state.
  2. Opening a dropdown closes any other dropdowns that were opened previously.

Like this: http://chapmaninvestment.com/investment-philosophy.html

I have come close to achieving this with interactions, but the interactions are now overlapping each other in a way that messes up functionality:

  1. I achieved this by making the “open” state an absolute positioned div that is set to Display: None, with an interaction that displays it upon clicking the “Accordion Toggle Holders” div, and hides it on second click.
  2. I used interactions to close any already-opened dropdowns when you click a closed dropdown.

Here’s where the issue happens: You click “Dropdown One” to open it. The “open” state displays when you open it. You leave it open and click “Dropdown Two”. When “Dropdown Two” opens, it closes “Dropdown One,” and hides the “open” state of “Dropdown One.” All good so far. But then if you want to open “Dropdown One” again, nothing seems to be happening - because the second click on “Dropdown One” is hiding the “open” state, which has already been hidden by opening “Dropdown Two.”

Apologies for the confusing explanation… please have a look at my read-only link to see what I mean.

I’d love any ideas on how to achieve this!

Thanks!

Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

2

Hi, there’s a rule in interaction design when you’re using a system that’s providing a “first click” and “second click” triggers options like Webflow: you can’t use the second click trigger or you face the issue you’re having now. Instead, you need to build several interactions, one for opening, one for closing etc, so you don’t enter into a problem of state.

3

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