▼
Streaming live at 10am (PST)

Issues with Dropdown Interaction and Formatting

Design help Animations & Interactions
#1

I’m trying to create a display/show functionality on my client’s website. I have three pricing panels and in one of the pricing panels she would like to show a basic/deluxe package.

I currently have two issues. I can create the initial interaction of showing basic/hiding deluxe and showing deluxe/hiding basic - but you will see when you try to switch between them more than once, the functionality no longer works.

I’m also getting a glitch whenever I click the “basic” link from the dropdown where it will lose all formatting that was applied to the Div block.

Any help would be massively appreciated!

Here is my site Read-Only

#2

Looks like your link is broken, can you repost it?

#3

Not sure what happened there! Here is the updated link.

#4

Looks like something weird is happening when you use that same interaction on both elements.

I got it working by doing to the following:

  1. Select the Deluxe container
  2. Select the Basic dropdown link
  3. Create a new interaction
  4. Select the Basic container and set it to display:flex
  5. Select the Deluxe container and set it to display:none

Once I did that, the dropdown is working as intended. Hope that helps!

image
image1975×1269 334 KB

image
image1990×1263 296 KB

#5

That’s exactly how I have it set up, and it works fine - but when I try to switch it back from Basic to Deluxe the Basic container completely disappears!

#6

Once you add that new interaction, it works fine (it does for me).

#7

Here is a full walkthrough, hopefully this helps - Loom | Free Screen & Video Recording Software

#9

I withdrew my previous response as I realise now what you meant - I had to make a SECOND interaction, doing the same thing. So essentially have the same interaction twice.

So strange!

Thanks for your help! :slight_smile:

#10

Nice! Yeah I’m not sure why that’s happening, but I’m glad you got it working.