Collapse/Hide Properties Easily

I’ve made a bit of use of the :block-hidden-properties configuration, but I find that it’s not always the right approach. I often want to hide properties (like tags and categories) that are unsightly, but also be able to conveniently edit them.

I’ve tried using the below, but sometimes the property is displaced and popped out above the hidden block and when that doesn’t happen, the property doesn’t seem to be applied.

#+BEGIN_HIDDEN
myproperty: myValue
#+END_HIDDEN

I think it would be convenient to be able to collapse properties almost like a child block or to be able to syntactically designate them as hidden when in view mode, but editable when in edit mode.

That would be great.
But I’ve seen videos where people already have this feature: How I'm Using Logseq For My DevLog & Technical Notes 👨🏻‍💻️ - YouTube

My Style Carousel plugin can be configured to toggle visibility, including properties.

Here’s are the custom settings you might use:

{
  "buttons": {
    "props": {
      "refreshRate": 5,
      "hits": ["text-decoration: underline;", ""],
      "styles": [{
        "char": "\\eeaf",
        "style": ".pre-block {display: none}",
        "hits": ".pre-block"
      },{
        "char": "\\eeb0",
        "style": "div#main-content-container:hover .pre-block {text-decoration: underline wavy;}",
        "hits": ".pre-block"
      }]
    }
  }
}

Basically, you just have to figure out your CSS selectors. Find your selectors and you can hide/unhide anything.

Here is another selector you could use:

div.block-properties.page-properties
2 Likes