Show-hide elements (DOM, front and backend), What is the quickest way to do it?

I Often requiere to quickly hide a bunch of elements from structure at once, while showing another bunch of hidden elements. It’s a recurring situation during A/B tests, debugging or measuring performance , or while presenting the project to a client or collaborators.

Going creating false Conditionals to each one element, doesn’t sounds like the most elegant method. Even typing “< !-- – >” is faster (and elegant).

Content->“display:none” checkbox may help on Front end, but the element is still rendered on the DOM and backend.

Coming from other builders that had an integral Show/hide feature on clicking the structure panel (Beaver Builder, i.e) I’m wondering what speed-light method do you use guys on Bricks to show/hide elements from everywhere including DOM? I’m a novice with Bricks, and for sure I’m missing something.

1 Like

If need to hide a section or block, I usually add “Display = none” and any false Сondition

If you use Advanced Themer it has either a Hide/Show entry in the structure panel element menu ( So right click to then hide/show an element ) and it has the Classes Contextual Menu so you can set a class to, say, Display None and easily apply or remove it from an element.

Don’t know about the DOM.

1 Like

I’ve found a solution that fits me:

I’ve created a container at the root of the structure, which I’ve marked as “display: none”, and then I’m moving the elements and containers I plan to temprary hide for my tests. So this container acts as a temporal trashcan for my own tests. This is easier for me than going marking elements as “display none”.

1 Like

I don’t think any of these remove the element(s) from the dom.

@paquito did you find a way to do this?

I have used Conditions for now. Setting the condition to:

Post ID
==
HIDE (or any non numerical text, this will ensure it will not render in DOM because pages/posts only ever have an ID with numbers.

Yeah. A condition like “post_id = 0” will hide on the frontend DOM, while “display= none” hides on the builder, but not on backend builder’s DOM.

1 Like