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

Source: Dev.to

Overview

This is the “before” and “after” of using the Custom Attachment Location plugin in Obsidian, followed by a tiny CSS‑only hack that automatically hides (and reveals) _assets folders in the file explorer.

1️⃣ What it looked like before

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
    …

2️⃣ What it looks like with Custom Attachment Location

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

The plugin keeps attachments tidy, but after a while the file explorer still feels noisy.

3️⃣ The “aha!” moment

A common request on the Obsidian Forums (e.g., a 2021 thread) inspired a pure‑CSS solution.
The original snippet that hides folders whose names start and end with __ looks like this:

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

That got me thinking: why not hide every folder whose name ends with _assets?

The CSS‑only “hide‑assets‑folders” snippet

What it does

• Shrinks every folder whose name ends with _assets (configurable).
• Expands the _assets folder only for the currently active note (or its assets).
• Optionally adds a scrollable area inside the expanded assets folder.
• Optionally highlights folders that are expanded but visually collapsed (a “warning” state).

Note – In the GIF below the two visible collapsed assets folders appear as a thin gray line (customizable).

📦 Recommended setup

1. Install the CSS Editor plugin (or use any method you prefer).

2. Create a new snippet file, e.g. hide-assets-folders.css.

3. Paste the CSS code (see below) into the file.

4. Enable the snippet:

   • With the CSS Editor – the snippet is enabled automatically; you can verify via the editor button.
   • Without the editor – place the file in VaultRoot/.obsidian/snippets/, then go to Settings → Appearance → CSS snippets and toggle it on.

5. (Optional) Keep your attachments organized with Custom Attachment Location:

   # Settings → Files & Links → 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 */

/* Base style for every assets folder (visible / hidden). */
.nav-folder:has(>[data-path$='_assets']) {
  background: color-mix(in srgb, currentColor 5%, transparent); /* Highlight all assets folders. */
  max-height: 4px;               /* Height of the hidden assets folder. */
  overflow: hidden;              /* Hide everything beyond the max-height. */
  transition: max-height 500ms ease-in-out; /* 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;          /* Large enough for smooth animation; at least 25px larger than the scrollable area. */

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

/* -------------------------------------------------
   Optional: highlight “forgotten” (expanded but hidden) assets folders.
   This helps avoid rendering glitches when the folder’s height is still counted
   by the explorer even though it’s visually collapsed.
   ------------------------------------------------- */
.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;               /* Slightly larger so it can be clicked to hide comfortably. */
  * { color: transparent; }
}

How it works

Limitations & Possible Improvements

• Pure CSS can’t say “show only the _assets folder that belongs to the active note”. It can only react to any active descendant.
• If a folder contains multiple _assets sub‑folders, all of them will expand when any child is active.
• A tiny JavaScript snippet (e.g., via JavaScript Init or a minimal plugin) could toggle a custom class on the correct assets folder, solving the above edge case.

Why the warning rule matters

Even when an assets folder is visually collapsed, Obsidian’s virtualized file‑explorer still counts its height. This can cause:

• Items being unrendered earlier than they should.
• The active note being pushed out of the rendered range.
• The _assets folder disappearing again because its DOM node is no longer present.

The red‑highlight rule flags any folder that is expanded (i.e., not .is-collapsed) but still hidden by CSS, prompting you to collapse it manually for smoother behavior.

TL;DR

1. Add the CSS snippet (above) to your vault.
2. Enable it via Settings → Appearance → CSS snippets (or the CSS Editor plugin).
3. (Optional) Use Custom Attachment Location to keep attachments in _assets folders next to their notes.
4. Enjoy a cleaner, less noisy file explorer that only shows the assets folder you’re actively working with!

Folder_assets/

Goals

• Keep _assets folders collapsed by default.
• Reveal the folder only when you’re inside that note’s folder.

Work‑around for the virtualization glitch

• Manually collapse the _assets folders, or
• Switch to a JS‑based approach that truly removes/hides the nodes instead of merely shrinking them visually.

Possible future enhancement

If there’s interest (or if it becomes too annoying), a tiny JavaScript helper / plugin could be added that:

1. Identifies the active note.
2. Derives the matching _assets folder name.
3. Toggles a class on only that folder.
4. Optionally collapses other _assets folders automatically to prevent virtualization issues.

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