Let users toggle selected elements to disappear

How To
1

I want readers to be able to choose whether they read the verbose version of my explanations or the terse version. How?

What I tried:
I gave a text element the CSS tag “verbose”, and added a button with an interaction set to hide elements with the class ‘verbose’ on click.
I added this same animation to a toggle element as well.

bricks screenshot
bricks screenshot546×693 32.5 KB

Result:
Nothing happens on the front end when I click the button or the toggle elements (the only visible result is highlighting text on the button).

Replacing “on click” with “mouseover” does nothing either.

For bonus points:
A user’s “verbose” setting would ideally be persistent across the pages they view. I have zero idea how to implement that.

2

In the interaction try the CSS selector as

.verbose (including the class dot!)

and make sure that in the text element you set the CSS class as

verbose (without the class dot!)

Cheers

Patric

1 Like
3

Patric, you are awesome, that works!. Thank you!

Making it into a toggle on and off is harder. I think you need separate buttons for ‘terse’ and ‘verbose’… though possibly you can reduce that clutter by animating the buttons so that each one hides itself on click, and shows the other. A bit kludgy but should work.

I’m concluding that Bricks can’t handle trying to make it a persistent setting. It will take some combination of a form to write preferences to the database, and PHP to read that and insert js code that hides the “verbose” tags for those who request it.
Huh. That’ll be a pig though.

4

Have you seen the example

Example: Create a toggle button (e.g. nestable accordion open/close icon)

from the academy?

1 Like
5

I hadn’t seen that (I had searched for ‘toggle’ in the academy and not found that). I’ve managed to get my two buttons that hide and show each other trick to work, and it’s a very similar logic.

What intrigues me from there is learning that you can set interaction conditions based on window, session, or local storage, and you can have actions that set browser storage. In theory I could have it set a browser storage value, and then use that as a condition, and maybe that would make their setting somewhat persistent across pages? Not if they changed device, but otherwise?