Looking for some custom JQuery

On the website I am currently making I have a drop-down menu that pulls down three different divs depending on the drop down link they click. The only issue with webflow is the interactions can only effect one element at a time. I need help with some custom JQuery that will close out one of these div drop down pages when one is opened. Right now when you click the drop-down all of them stay open.

I am not a heavy Javascript coding guy - so any help would be really appreciated.

Website Url: www.michaelbambino.com/website17 - - - if you click on the bridal couture drop down you’ll see what I mean.

Thanks Guys!
Sean

@Waldo - perhaps you can shed some light on this? you seem to always have the answers lol.

So basically… your problem is:

Under “Bridal Couture”…

if the visitor selects

  • “Before the I Do’s” menu item… it opens an info DIV

if the visitor then selects

  • “The I Do’s” menu item… it opens another DIV on top of the “Before the I Do’s” info DIV.

To dig further…

if the visitor then selects

  • “After the I Do’s” menu item… it opens another DIV on top of the “The I Do’s” info DIV.

So you end up with 3 layered DIV’s…

  • that each have a Close Link…
  • that you must select manually.

I don’t understand why the interactions can’t auto-close the open windows

  • before opening the new window ? You can set multiple actions on a click trigger.

ie: Why do you need JQuery ?

@Revolution you are correct… hmm I wasn’t aware the interactions could close windows? - Can you elaborate more for me on how I would do so?

Thanks,
Sean

Only issue is how would I assign the click to close out another window? From my understanding right now interactions will only let you target one object.

The far right has an eyeball / hide:

Basically… from what I see - you have 3 interactions… 1 for each option.

And your options being:

  • Before I Do (BFID)
  • The I Do’s (TID)
  • After the I Do’s (ATID)

So… when the user selects BFID - it runs the BFID click interaction and opens that specific window.

Same with TID… the user selects TID… then TID interaction runs and opens that window.

Same with ATID…

Try this
in the BFID interaction… (which probably has 1 click event where you show the DIV)…

  • add 2 more click events before the current click event

Organize / move the the 2 new click events so they become step 1 and 2…

  • making the existing click event #3.

The new step 1 would close / hide the TID DIV.

The new step 2 would close / hide the ATID DIV.

Add a Show (which is the first item in the graphic) as the first line in step 3.

That way… when the person selects the BFID option… it hide TID and ATID - then displays BFID.

With the TID interaction - basically the same thing as the BFID interaction…

  • create 2 new steps… making the current step #3.

The new step 1 would hide the BFID DIV… and step 2 would hide the ATID DIV.

Same thing for the ATID DIV… step 1 hides BFID - step 2 hides TID.

Thanks @Revolution - I got it! don’t know how I missed that each click can target a different element… feel so dumb haha… thanks man!

One last thing… why wont the drop-down click once when the page div comes down? I have to double click for some reason. I looked at the Z index and it shows its on the very top.

no a prob. Glad it was an easy fix.

Now… there are some things that cannot be done in Webflow

  • and you need a little jquery on the side…

here’s an example: (mouse over the eyeballs)

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

Haha i like that… yeah my buddy in my business is a Jquery nut… but he has a FT job and won’t take the leap with me on this thing. One day… one day.

Did you see my question about the dropdown though? so weird its behaving that way.

that one’s a little weird isn’t it.

I’ve been looking at it… not sure why it’s happening.

I would have to see the internals to figure it out.

Also - have you heard if there is an issue with exporting code? I have tried to export the latest changes out and upload via ftp as I have done over and over - but it won’t take the latest uploaded files for some reason. It seems the exported code isn’t updating which is also really really weird.

I haven’t seen this - and hopefully I won’t.

I’ve got 4 projects in process right now…

  • have been exporting continuously for 2 weeks (except 12/24-25).

So you are saying…

  • you update the site… export… and the changes are not there ?

Yeah… exactly. Making me nervous because I have to launch this website tomorrow.

Ok so here is the finding… when I do it on another website it works. For some reason on the main website hosting it won’t update. odd

If you have time to take a look at why that dropdown is happening i can send you the preview link? if not no biggie man let me know.

geez… I feel for you.

Does Webflow know this ?
I checked and don’t see any (recent) posts about this.

I’d be all-up-and-down their backs about this… if it were me.

Send me that link… maybe I can find something. Not sure how quickly though.

Preview Link: https://preview.webflow.com/preview/mb-new-2b14dc01b92c2ac117a65cee35d157c6?preview=e6301a3ece36fbe68bdfc19e313c8959

maybe it’s your cache…

one way to find this out is

  1. Both of us visit the website before the export
  2. You export and update the site
  3. We revisit the site… see what’s change (if anything)

or even easier… clear out your cache.

Cache clearing - i did that… that was my first thought exactly.

It’s weird - if I create a new directory on the hosting it works… it just won’t overwrite the files on the old testing directory.

In addition to that drop down menu acting odd… one last thing if you don’t mind I need help with. For some reason when a phone is in landscape the mobile menu doesn’t display all the links. I have never had this issue in the past so I am really confused by it.

Again - thanks a lot man!