Interactions open only current 💡

I’m looking for a way with interactions to open only the current post // id. Now when clicking on the “I”, all “hidden” divs are opened.

Tried different configurations, but maybe I oversee something. Also tried the pop-over, but that doesn’t fulfil the requirements.

A suited option would be the accordion, but then an “customised accordion”, where the accordion-header and accordion-content can be separated // positioned in different div’s.

Additional questions: the “I” is a paragraph, when I use an icon or a button the interaction doesn’t work?

I am guessing you may be targeting a specific element (maybe by class) and because it is within your query item it is being replicated which is why all of the content in all of the items is being revealed.

Instead, if you make sure your “i” element is nested only within the container that holds your query item, then target the parent element of the item triggering your interaction and toggle a class on that, it should only affect the specific query item you are within.

Then you can use a relative style to show your inner “extra-content” container with something like .reveal-extra-content .extra-content

Alternatively, if you want to get creative with the CSS, you can reveal content beneath when clicking on a the “i” using a semantic html approach which would not require any interactions:

You can simply wrap your extra-content in a Div block, change the html tag to details then wrap your “i” element in a Div block and change the html tag to summary.


Thank you very much for your detailed response.

With the interactions, I can’t get it to work, it keeps opening all other divs.

Your other option, details // summary, (clever) simpler solution, but working completely as wished.

See screenshot, it’s automatically adds the details box, like an accordion and no possibility to trigger it with the “I” (summary).

@Araminta, could you please give a working example?

Thank you!

You will need to make the “i” the summary inside the details block, then absolute position it within the query item. You can customise the look and feel of the summary and details blocks via CSS, please see the examples in the link I shared.

Thanks @StrangeTech, also tried this, but can’t absolute position it.

Before asking the question here, I already tried different interaction possibilities, but this is getting a little bit annoyed, takes too much time.

Nevertheless, I appreciate your efforts!

@Araminta, again, please add an working interaction example

I’m wondering whether you tried this option and if so, what prevented it from working?

I tried this, but is does remove the “I” paragraph and doesn’t trigger the content.

I think my suggestion may not have been worded clearly enough. I don’t have time to do a full example, but I will try to give you as much clarity as possible.

This technique can use animation but for the purposes of keeping this example simple, imagine it is simply setting display: block; to show the extra content.

For it to work, you will need the following three things:

  1. An item container block that you can apply the class to with the interaction
  2. An “i” block with the interaction added to it that is a direct child of the item container block
  3. An extra content block that contains the content you want to show when clicking the “i” block (initially set to display: none; (this must be a descendant of the item container)


  1. Add a virtual class (using shift+enter or shift+click in the classes dialog) to the item container called .reveal-extra-content (toggle this off by default)
  2. Add a relative style to the item container .reveal-extra-content .extra-content that shows the extra-content block with display: block;.
  3. Add an interaction to the “i” block (using the example image I showed above for reference) that toggles the .reveal-extra-content class on the parent.

With these steps it should work.

Again thank you @StrangeTech for your efforts!

But, whatever I tried, can’t get it to work.

When I understanding and other correctly, in my set-up, the “extra content” block, can’t be a descendant of the item container; see screenshot query-template setup.


The two issues from your structure are only:

  1. The interaction should be on the Div block wrapping the “Extra-info-trigger”, not on the paragraph inside
  2. The Div containing the “Extra-info-trigger” is currently within the “Div - Event” block, if it is moved into the parent of that, the solution should work.

I understand this will require a change to your structure, I am just letting you know what is required for the solution to work with the interactions the way I presented it. From what you showed, it should be possible to have the layout you need with these changes.

I also tried your last suggestions, but unfortunately it isn’t working.

What happens? Does the class not get applied correctly to the item container? Does the relative style not get applied to the extra-content block?

Logically it should work, so it will be useful to figure out what specifically stops it from working.

The trigger doesn’t do anything, maybe I have a bad :computer: day, but this is already costing me more than a day. I not easily let go things, but this one is hitting the frustrating-level :upside_down_face:

And I also don’t want to “rob” off your time.

We have all had those days!

I definitely don’t have much time but I also really want you to have a solution.

I am going to run a quick test shortly as soon as I have a moment and will let you know what I find.

OK, I only had a couple of minutes, but I quickly knocked up a working example of this, so I can confirm it works.


Item Container (ignore the link - this was from another test):

Relative style (added to Item Container):

Info button:

Interaction (on Info button):

Hopefully this gives you what you need :smile:

I’m getting :crazy_face:

Before you gave me your insights, I had set it up exactly the same, only difference was the relative style setup you; for extra-content I used ‘same-set’.

Long-story short, it’s not (yet) working. When I click the ‘trigger’ I see in the html it adds the class reveal-extra-content, but the div with the extra content stays on display:none.

Make sure the extra content block has a class of .extra-content and is a descendent of the item container.

Unfortunately it doesn’t work.

// With the toggle display class interaction it does works, but then all the extra-content div’s are opened.

That is not possible using the strategy I shared because the target of the interaction is the parent of the “i” block, which means it should only apply the class to the individual item container.

Please check that you specified the same parameters as I showed in my screenshots in the interaction configuration.

Saw that you added a screenshot of your structure; but so far as I can see now, I can’t apply that structure in my current. The extra-content is supposed to be add the bottom and the button has to be at the desired place. Otherwise I could have used a accordion, but that doesn’t fit in the current layout.

I try it now once again, just as in your last added structure screenshot; just to see if it works at my side.

Thanks again for your help!