Sibling/nested elements explaination

Hello All,

Kind of a noob question but I was hoping someone could explain how the “limit to nested elements” and “limit to sibling elements” selectors work in interactions.

My hope is to find a simple way to hide a series of divs with a click of a link while opening one. I have a series of logos that have corresponding descriptions that are set to show/hide when you click their logo. That part is easy and works fine. But I need any other open descriptions to close whenever I click on a logo, so that they don’t stack. Does anyone know how to easily achieve this? So far I have duplicated the structure of the description but named the first one Bosch and the second one Canon to match their respective logos.

Here it is so you can get an idea Vendors

And heres my public link https://webflow.com/design/cad?preview=8db6b6b4a108aa7ec50b0d7e0a72ad74
You have to select the last page in the site, Vendors.

Thank you all so much for the help!

Okay so I had a look and was able to accomplish what you wanted in a way. I would suggest you turn off 2nd click variables on all interactions for logos because clicking on; suppose I click logo 1 and it shows desc1 and then I click logo 2 and the description changes to desc2. But if the user clicks logo 1 again they expect the info div to show desc1 but instead of that the 2nd click toggle will trigger hide and it will close. Easy way to work around the hassle is add a x button or something inside the infodiv. You also have to hide the other infodivs on click since theyre stacking up so add in another trigger on click.

I wish WF public links had the ability to pass along modified page links. Because youre gonna have to recreate what I essentially created.

I just changed your structure. I made a master info div and then inner divs with just the content. Below is the screencast of what I did. I figured this is easier than screenshots. [:

Screenr Screencast

I hope you get an idea. Its a rough screencast but I think I covered everything I did.

Edit: I forgot to show you how I nested the classes. WF doesnt allow you to duplicate classes so what you do is remove the “InfoDiv” class from your Canon or Bosh master divs, add a unique class to them and then nest the existing .InfoDiv, this way you wont have to redo your class styles.

I was wondering why not just use the tabs widget and style the shit out of it? I haven’t personally used the tabs widget yet so I dunno if its as customizable as the slider widget, but if it is than you should be utilizing tabs, since what you’re trying to make are accordion tabs.

I tried using tabs but webflow unfortunately made it so the tabs element loads the tabs in order on mobile followed by their content instead of each tab triggering the content just below. Very bad implementation and makes it useless to me.

Ah I had a feeling it would be of no use. Did my screencast help? Did you figure it out?

To be honest your your post is not really clear and the video is hard to follow. My client wants each logo to show and hide the description, he also wants it to hide any other open descriptions when clicked. Keep in mind there will be about 100 logos on this page and many more rows of this and so closing any open descriptions is the really hard part. A logo on another row needs to close any open descriptions on all the other rows. I wanted to try to find a universal way of closing any and all open descriptions with one interaction to save me the headache of manually doing hundreds of different interactions, all with 1 variation.

This is where I hoped the nested/sibling element’s might hold some value if I knew how the heck they worked.

If there’s a 100 logos on the page than my method would be impractical. You’ll have to work figure out a better structure. As for sibling and nested elements, here’s what sibling and nested elements are in your case. If I understand it right.

1 Like

As I am a newbie my explanation might be wrong, but so far it works for me.

Let’s take an example with a show/ hide interaction.

Let’s call the thing which you click first a “subject”.

Let’s call the thing which comes to effect of the clicking an “object”.

That is, in the case of a show/ hide interaction the title text you click first is the subject, the text which appears after clicking is the object.

That is the “subject” is the cause and the “object” is the effect.

Then “sibling” and “nested” refers to the relationship between subjects and objects.

Limit to sibling elements means that you limit the interaction to the cases in which the subject and the object are siblings to each other (that is the subject and the object are equal in the hierarchy seen on the Navigator pane).

Limit to nested means that you limit the interaction to the cases in which the subject contains the object (that is the subject is a “parent” and the object is a “child” in the hierarchy seen on the Navigator pane).

My take with a webflow example http://sab.webflow.com/nested-siblings

3 Likes