Toggle element visibility show/hide like in Photoshop

We're using Webflow to prototype interactions. We sometimes need to quickly toggle visibility of layers, modals, menus etc. It would be great if you could add little eye icons in the elements panel. Now I need to do it manually and slowly by adding 'is-hidden' class to hide element, and remove it to show it.

 

Eye Icon like Phothoshop
The eye icon, when toggled off, should add a "w--is-hidden" class with "display: none !important" to selected element and should be published with this class, so that it could be toggled off with custom code.

 

Hide with keyboard shortcut

And it would be useful to have a keyboard shortcut to toggle visibility of selected element, for example Cmd + H

  • Maciej Sawicki
  • Nov 4 2018
  • Maciej Sawicki commented
    November 04, 2018 16:31

    And it would be useful to have a keyboard shortcut to toggle visibility of selected element, for example Cmd + H

  • Maciej Sawicki commented
    November 04, 2018 16:35
  • Admin
    Webflow Team commented
    November 05, 2018 19:07

    This would be an interesting feature.  Currently we have the visibility options in the settings panel already.  Can you help explain a use case for this feature?

    - Nelson, Customer Success Specialist

  • Maciej Sawicki commented
    November 06, 2018 08:43

    There are 2 major use cases:

    1. As an advanced user of Webflow, I work a lot with jQuery custom code to enhance Webflow capabilities for prototyping and building simple apps, faster and better than in Axure or Justinmind

    2. As a graphic designer I want to work on comples animated designs in Webflow that use layers

    Example 1: Layered animations

    Complex animations require several layers... Think of things like this https://dribbble.com/shots/2970992-Firefox-loading-animation For such design we need to work with layers similarly to a graphic design software like Photoshop, toggle other layers so that they won't get in our way. 

    Example 2: Overflown elements

    If I have components with overflow hidden or overflow auto, and there are multiple divs inside, its hard to edit the elements that are cropped. It would be great to hide them temporarily with one click.

    Example 3: Modals

    I have a modal-wrapper element on a page, that should be hidden when page loads.To show the element I use custom code. To edit this element I need to show it in Webflow. So in Webflow I add a combo class "is-hidden" with "display: none" to temporary show or hide it. After my edits are finished I need to remeber to hide the element so that it is not shown when page loads and repeat the slow procedure of adding a "is-hidden" class. It would be much faster to do this with keyboard shortcut.

    Example 4: Custom dropdowns, popovers etc.

    Sometimes I want to add an interaction, that when you click something, a popover appears. It should be hidden on load, but to edit it I need to show it temporary in Webflow. Toggling the class is long and relatively slow, I need to select the class field, delete the "is-hidden" class.

    Example 5: Customized input elements, checkboxes, radio buttons etc.

    I prototype complex apps, so I need styled form elements. I build my own micro-components, for example custom select dropdowns that have icons inside, subtexts etc. (see attachment).  The selected items are just divs, but hidden. But to edit them I need to temporary show them in Webflow. 

     

     

    Recap on the idea: now when I think about it, the eye icon should actually not be temporary, but just a shortcut for toggling a system class "w--is-hidden" that has "display: none !important". This would make this feature simpler to understand, so that what you see is what you see on screen is what you get on the published page, but still allows for better workflow for all above use cases.

     

     

     

     

     

     

  • Maciej Sawicki commented
    November 06, 2018 08:52

    @WebflowTeam I looked into the settings panel, and the difference in my use case is that I need to hide/show on all devices with one click. Think of another toggle there that hides the element on all devices and grays out the specific per-device visibility. 

  • Maciej Sawicki commented
    November 06, 2018 08:56

    I researched more:

    - I can see that the existing visibility toggles add the w-hidden-main class etc.

    - There is already a w-hidden class

    - To implement my idea we simply need to implement another toggle, but not for specific device but global

    - Then we just need to expose this toggle in the Navigator

    Sounds to me like something simple to implement, since the whole logic exists, just need more params