Streaming live at 10am (PST)

Interaction to close open one div and close over divs


#1

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:

Any help would be greatly appreciated!
Thanks guys.


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


#2

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:


#3

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.

Thanks!


#4

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


Alternating interactions
#5

@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??


#6

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.


#7

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/


#8