Interaction to close open one div and close over divs

Hello,

I know there has to be a simple solution to this problem.

I have a section that has multiple (+) signs to open divs. I would only like one to be open at a time. Opening another (+) card should close any other open cards.

For clarity please view my pricing section:

http://chris-s-stellar-site-2192fe.webflow.io/#Pricing

Any help would be greatly appreciated!
Thanks guys.


Here is my public share link: LINK
(how to access public share link)

hi :slight_smile:
You have already done it, sort of. When you press the + on the one that is open, you close it.
So now you just have to make a Interaction that Affect different elements

but if im not mistaking you need to have a unique class name on every div.

btw, youre + looks like satans crosses not + signs :joy:

Hi @krubens,

Thank you for your response. I went ahead and changed one of the divs for the cards, but this doesn’t seem to solve my solution.

Please have a look at the gif I put together. (give it a moment to play)/

I do not want the user to be able to open 2 cards at once. Is that possible? Opening another card should automatically close other cards.

http://res.cloudinary.com/artcrate/image/upload/v1483224397/Assets/Div_Hide.gif

Thanks!

When you 1 to open
Add the interaction to close all the others also

For example

Assume links 1, 2, and 3

Open 1 closes 2 and 3 then opens 1
Open 2 closes 1 and 3 then opens 2
Open 3 closes 1 and 2 then opens 3

@Revolution Thank you for the reply. That is how I was thinking you could accomplish this.

Is it possible to target more than one element off of a trigger? Sorry newb here.

Could you quickly show me how to do that??

Yes it is. Check my profile. Look for a site called The More.

I’ll see if I can make a small demo as well.

In reviewing your site again… I see you figured it out.

Turns out… doing it with interactions-only is a PIA.

My version uses JQuery - with some interactions… and the interactions are not really necessary.

http://art-online-demo.webflow.io/

1 Like