Automatically hide _assets folders in Obsidian (until you need them)

This used to be you (and by you I mean me).

Articles/
  Some Guide/
    _Some Guide.md
    Another take.png
    Final result.png
    How to do that.png
    How to do this.png
    ...
  Another Article/
    _Another Article.md
    Screenshot 1.png
    Screenshot 2.png
    ...

This is you with the Custom Attachment Location plugin.

Articles/
  > Article A_assets/
  v Article B_assets/
      file-1.png
      file-2.png
      ...
  > Article C_assets/
    Article A.md
    Article B.md
    Article C.md

It works, it keeps things tidy, but after a while the file explorer gets noisy anyway.

So I looked around.. , and around.. , and found that it was pretty common wish on the Obsidian Forums, one such dated back to 2021.

After digging around for a bit more I found a stupidly simple brute-force CSS snippet....

/* hide path's with __before and ending with__ */
.nav-folder-title[data-path^="__"][data-path$="__"] {
  display: none;
}

🤯🤯🤯🤯💡💡💡 and it hit me.

This article is my take on this CSS-only "hack" that you can drop straight into Obsidian > Appearance > CSS snippets without installing anything.

---

What this snippet does

• Shrinks every folder whose name ends with _assets (configurable)
• Expands the _assets folder only for the currently active folder (when one of its notes or its assets is focused/active)
• Includes optional css for scrolling within assets.
• Includes an optional “warning” highlight to identify folders that are expanded but visually collapsed (more on why below)

Note: In the gif below, the two visible collapsed assets folders are displayed as a thin gray line (customizable).

---

"Install" (Obsidian CSS snippet)

Recommended: Use the CSS Editor plugin.

With the editor:

1. Use the CSS Editor from the sidebar Ribbon to update an existing css snippet or create a new one, e.g. hide-assets-folders.css
2. Paste the CSS code below into it
3. It should already be enabled. You can check by using the CSS Editor button again.

Without the editor:

1. Copy the snippet into a file, e.g. hide-assets-folders.css
2. Place it in your vault’s snippets folder:
   • Settings → Appearance → CSS snippets → (open snippets folder)
3. Enable it in Settings → Appearance → CSS snippets

Recommended: Use the Custom Attachment Location plugin to keep your attachments organized in _assets folders next to their notes.

• configure "Location for new attachments": ./${noteFileName}_assets

---

The CSS snippet

/* Hide assets folders – https://forum.obsidian.md/t/automatically-hide-assets-folder-when-not-focused/111617 */
.nav-folder:has(>[data-path$='_assets']) {
  /* Base style for every assets folder (visible / hidden). */
  background: color-mix(in srgb, currentColor 5%, transparent); /* Highlight all assets folders. */
  max-height: 4px; /* The height of the hidden assets folder. */
  overflow: hidden; /* Hide everything beyond the max-height. */
  transition: max-height 500ms ease-in-out; /* Enable smooth expand/shrink animation. */

  /* Style overrides for active folders (has an .is-active child). */
  .nav-folder-children:has(>*>.is-active) > &,
  .nav-folder-children > &:has(.is-active) /* When the assets folder itself has an active asset. */
  {
    background: color-mix(in srgb, currentColor 3%, transparent); /* Highlight for active expanded assets folders. */
    max-height: 150px; /* Some large number is needed for the smooth effect. Too large ruins the animation, too small may limit assets visibility. Set at least 25px larger than the scrollable area below. */

    /* Optional: Enable scroll within assets folders. */
    .tree-item-children {
      max-height: 125px; /* Max height of the scrollable area. */
      overflow-y: auto;
    }
  }
}

/* Optional: Highlight forgotten NOT-collapsed assets folders that break menu items rendering due to expecting their actual height. */
.nav-folder-children:not(:has(>*>.is-active)) > .nav-folder:not(.is-collapsed):has(>[data-path$='_assets']):not(:has(.is-active)) {
  background: color-mix(in srgb, red 30%, transparent);
  max-height: 10px; /* Make it slightly larger so that it can be clicked to hide comfortably. */
  * { color: transparent }
}

How it works (quickly)

• It targets folders whose data-path ends in _assets using:
  • :has(>[data-path$='_assets'])
• “Hidden” is implemented by collapsing the folder’s height:
  • max-height: 4px; overflow: hidden;
• When a note within that folder becomes active (.is-active), the child _assets folder becomes “tall” again:
  • max-height: 1000px;

Obsidian’s file explorer DOM structure makes :has(...) a surprisingly powerful tool for this kind of UI behavior.

---

Known drawbacks (and why they happen)

1) If there are multiple _assets folders in the active folder…

With pure CSS, you can’t easily say:

“Show only the _assets folder that corresponds to the active note.”

CSS can only express relationships like “some descendant/sibling is active”, not “the descendant matches this sibling by name”.

So if your active folder contains multiple _assets folders, the logic can’t reliably reveal just one of them based on the current note.

Possible fix: a small JS snippet (via something like JavaScript Init) or a tiny plugin that toggles a class on the “correct” assets folder.

2) “Hidden” folders still affect virtualization / scrolling

This one is subtle.

Even though the folders are visually reduced, the file explorer’s rendering system still “counts” their size as if they were normally present. This is especially problematic when they’re expanded but visually limited by CSS. Obsidian virtualizes long lists (it dynamically renders/unrenders items based on scroll). When invisible elements inflate the expected height, rendering can happen too early/late, and you can end up with odd behavior like:

• items being unrendered sooner than expected
• the active note being pushed out of the rendered range
• the _assets folder disappearing again because the active item DOM isn’t present anymore

That’s why the snippet includes a “warning” rule that highlights in red _assets folders that are not collapsed (expanded state) but currently hidden. In practice, it’s a signal to collapse them for smoother explorer behavior.

---

Recommended usage pattern

• Use a consistent naming scheme like: SomeNote_assets/ or Folder_assets/
• Keep _assets folders collapsed by default
• Let the snippet reveal them only when you’re inside that folder
• If you run into the virtualization glitch often, consider:
  • manually collapsing assets folders
  • or moving to a JS-based approach that truly removes/hides nodes rather than just shrinking them visually

---

What I might build next

If there’s interest (or if it annoys me enough), the next step is a tiny JS helper/plugin that:

• identifies the active note
• derives the “matching” _assets folder name
• toggles a class on only that folder
• optionally collapses other _assets folders automatically to prevent the virtualization issues

---

Credits / inspiration

This is based on and inspired by the forum CSS approach. Originally introduced in this thread.