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
  • Loren Tracy commented
    23 Sep 06:31pm

    I agree, instead of hiding the div or item with the display setting, which actually changes the way your page renders, allow us to hide the layer in the Navigator so that you don't see the item in the designer but it still shows up when the page is rendered. Would be great for overlay menus and page transition designs.

  • Josh Priollaud commented
    8 Oct, 2019 11:43pm

    Maciej is correct.

     
  • Maciej Sawicki commented
    6 Nov, 2018 08:56am

    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

  • Maciej Sawicki commented
    6 Nov, 2018 08:52am

    @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
    6 Nov, 2018 08:43am

    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.

     

     

     

     

     

     

  • Admin
    Webflow Team commented
    5 Nov, 2018 07:07pm

    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
    4 Nov, 2018 04:35pm
  • Maciej Sawicki commented
    4 Nov, 2018 04:31pm

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

  • +8