Streaming live at 10am (PST)

Reveal On Click Interaction


#1

Hi All,

Me again!

I’m in the process of setting up a certificates page on my site and the effect I’m trying to achieve is that the user will be able to see all of the certificates when the page loads but all the information about the certificate is hidden.

When the user clicks the read more button, the info about that certificate appears underneath. When they click it again it hides the text.

I followed the tutorial on how to do this in the Webflow University and managed to get one of them working properly. I have another 6 certificates to add though but as you can see from the site link below… when I add more than one it screws up the ‘Read More/close’ button and when you click the ‘Read More’ button it opens both certificates at the same time.

I’ve tried changing the interaction to only affect the class and children in that class but that seems to break the animation altogether?

I’m out of ideas on how to fix it now so was hoping someone could point me in the right direction!

Thanks in advance!


Here is my public share link: https://preview.webflow.com/preview/wb-website-2019?utm_source=wb-website-2019&preview=4fbbec28a676336811941a2b3533b08f


#2

In your interaction change it to affect only siblings

53%20AM

this way only class on the same level of hierarchy will be affected. Though there is currently a bug which is being fixed but not yet resolved - at least for me when I changed the class to “only siblings” the objects in interaction disappeared (perhaps this happened to you to, hence ix was broken). To fix this, select all missing objects in the interaction timeline, right click and choose “change target” . Now click the certificate intro text container and again assign it to affect class and siblings. This should work.


#3

Hi dram, Thanks for your response… I tried changing the class to “Only Siblings” and made sure the targets were pointing to the container which has stopped the dropdown text opening every certificate.

The open and close button are both appearing now though even though I’ve set the display to none in the transition to hide the buttons that aren’t needed when the user clicks?

Here’s the link to the current layout: https://preview.webflow.com/preview/wb-website-2019?utm_source=wb-website-2019&preview=4fbbec28a676336811941a2b3533b08f


#4

You was overzealous in setting everything to only siblings :slight_smile: For both buttons use only children

There are no magic in ix, everything adheres to the logic, so just think about your hierarchy of elements and you will see when you need to affect siblings of the interaction trigger, or when what you need to affect is located inside the trigger in which case you target its children etc.


#5

Worked a treat, thanks for your help! I just need to get my head around the hierarchy now… hopefully that knowledge will come with time! :smile:


#6

Oh it will absolutely! You have a great journey ahead, mate!


#7

Hi dram,

Thanks again for your help in getting the Certificates page working on my site.

I can’t get the layout working on the tablet view though… for some reason it won’t flow the certificates over to the second line and they get cropped off?

The bullet points on the second certificate are smaller on all the mobile versions as well.

It’s probably something I’m doing wrong but a few pointers would be helpful!

Here’s my live share link:
https://preview.webflow.com/preview/wb-website-2019?utm_source=wb-website-2019&preview=f54cab1abb9ad1f8e139f44b3ea270f6

Kind Regards
Dan


#8

Well, you told their parent container to not wrap children so it is doing just that
04%20PM

Remove the styling of the children from the tablet breakpoint.

Not sure I understood this one.


#9

Thanks dram… I think something must have changed the parent container to not wrap on the tablet view. When I first set up that wrapper I made sure i set them all to wrap.

Will just need to make sure I double check them all when I’m finished with the layout on that page.

The type size had changed on all the mobile versions as well which is why the bullet points looked smaller. I’ve just gone in and manually changed all of them as well.

Thanks again for your help!