Bricks Academy Tutorial Out of Date: How to create toggle button with interactions

Hi, I LOVE Bricks so far (switched from Elementor) but I’m very new to coding and the documentation for interactions tutorial is based on using the “add attribute” setting in interactions. However, in the current version of Bricksbuilder there is no such setting. There is “set attribute” or “toggle attribute” (which I imagine is what I need to use!)

I’m sure it’s self-explanatory if you know even a bit more than me about coding but from where I am I can’t figure it out even by reading a few forum posts here about interactions. If any one feels like documenting how to use interactions to toggle between two icons in a div in Bricks 1.73 I would very much appreciate it as I’m stuck!

Here’s the out of date page:

Interactions – Bricks Academy.

I don’t find it very intuitive either. I am not expert, but here is some info that may at least answer your question.

I hope the TRIGGER is fairly clear. The ATTRIBUTE bit is confusing, but it’s pretty much any attribute. While there is a hide/show element - from memory this removes it from the DOM. It’s often better to add / remove a class to hide elements. So you can set/remove - or toggle an attribute. Set/remove is good for making 2 interactions on e.g. mouse-in, mouse-out. Toggle is good for switching states on click (as you want to).

Then the weirdly named ‘KEY’ is the kind of attribute you want to set/toggle. In your case CLASS. The VALUE is the name of the attribute. (Note: it is the same as in the DOM - so no # or . if it’s an ID or class).

Target I think is pretty obvious. In your case CSS SELECTOR. (Note: it it the full selector, so it DOES include the # or . of the element class/id).

Hope that clarifies at least some of it.

4 Likes

Typically “click” wouldn’t work on mobile

This isn’t true, regular click even listeners will work on mobiles. (all Bricks’ elements are using click events only, nothing mobile-specific)

1 Like

Oh! My mistake. Good to know. Not sure where I read that but thank you for correcting me. I deleted my above post so as not to misinform anyone who might stumble on this page.