Userscript that hides tags in the display of Trove lists and adds a link to toggle their visibility

hide_tags_trove_lists.user.js

// ==UserScript==
// @name        Hide tags in Trove lists
// @description Hides tags in the display of Trove lists and adds a link to toggle their visibility
// @namespace   wraggelabs.com/hide-tags-trove-lists
// @match       *://trove.nla.gov.au/list/*
// @require  https://code.jquery.com/jquery-3.7.1.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @version     0.1
// @author      Tim Sherratt
// @homepage  https://timsherratt.au
// @description 16/07/2025, 16:16:58
// ==/UserScript==

function hideTags (jNode) {
    // Get all list items and loop throug them
    let items = $(".items").find(".list-item-container")
    $.each(items, function(i, item) {
      // If the item has tags and doesn't already have a toggle button, we'll process it
      if ($(item).find("a.toggle_tags").length == 0 && $(item).find("div.no-tags").length == 0){
        // Get the container that holds tags
        let tagContainer = $(item).find(".find-more-container");
        // Get the number of tags
        let numTags = tagContainer.find(".btn-group").length;
        // Create a link that will be used to toggle the display of tags
        let toggleLink = $("<a class='toggle_tags' style='display: block; cursor: pointer;'>Show " + numTags + " tags</a>");
        // Add an on clik function to the link that toggles the visibility of tags and changes the link text
        toggleLink.on("click", function () {
          $(this).next(".find-more-container").toggle("slow");
          $(this).text($(this).text() == "Show " + numTags + " tags" ? "Hide tags" : "Show " + numTags + " tags");
        });
        // Insert a heading for tags, like there is for Notes
        tagContainer.before($("<h4 class='heading' style='font-weight: 400; font-size: 1.375rem'>Tags</h4>"));
        // Insert the toggle link before the tag container
        tagContainer.before(toggleLink);
        // Hide the tags
        tagContainer.hide();
      }

    });

}

// It's hard to know when Trove pages have finished loading
// waitForKeyElements will keep checking until no more items are added
waitForKeyElements (".list-item-container", hideTags, false);

Hide tags in Trove lists

When Trove displays the contents of a list it includes all of the tags associated with items in the list. If there are lots of tags this can consume a lot of screen space, making it difficult to quickly scan the contents of a list. This userscript hides tags by default and adds a link to toggle the display of tags for each item. The toggle link also tells you the number of hidden tags.

Before userscript

Here's a list in which the items have many tags. All the tags are displayed by default.

After userscript

With the userscript running, tags are hidden and a link is displayed to toggle their visibility for each item.

Toggle tag visibility

Click on the show tags link to display the tags associated with that item.

Installation

1. Add a userscript manager to your browser, for example TamperMonkey or ViolentMonkey.
2. Click on the 'Raw' button in the header of the code box above. The userscript manager will then ask you if you really want to install it. Click install!