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.
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.
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:
An item container block that you can apply the class to with the interaction
An âiâ block with the interaction added to it that is a direct child of the item container block
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)
Steps:
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)
Add a relative style to the item container .reveal-extra-content .extra-content that shows the extra-content block with display: block;.
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.
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 interaction should be on the Div block wrapping the âExtra-info-triggerâ, not on the paragraph inside
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.
The trigger doesnât do anything, maybe I have a bad 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
And I also donât want to ârobâ off your time.
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.
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.
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 
