How can clients update hidden or overlapping elements in the editor?

Does anyone have any good approach for allowing clients to use the editor to update elements that are hidden or behind other elements? For example if there’s a text block that appears only after an interaction trigger, or a div behind another div that shows only on scroll interaction. In the designer I temporarily use display: none, but need an approach from the editor side for clients.

Thanks!

1 Like

Having same issue with an Accordion block. Did you get anywhere @timt

Hi Tony.

As the Editor runs on the published site, there currently isn’t a way to toggle the visibility of elements on/off.

You require some custom code to accomplish this in the Editor. For example, if your hidden block(s) has a class of “Accordion block”, then you can paste the following code in your project’s Footer code section :arrow_upper_right: and publish the site.

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
     if(Webflow.env('editor')) {
        const accordion = document.querySelector('.accordion-block');
        accordion.style.display = 'block';
        accordion.style.position= 'relative';
     }
  }
</script>

This will force the accordion to:

  1. Get shown if it was previously hidden.
  2. Become clickable incase it was overlapped by another element due to Absolute positioning →

Hope this is helpful.

If that works - it is extremely sneaky! Thank you.

Ah - so the elements are visible, but the block isn’t expanded to the right size.
Are there any mods to that code that would trigger them open?
https://xantium.webflow.io/