Show or hide components

In a character sheet, you may sometimes want to hide certain parts of the sheet to make navigation easier.

To hide and show components, you need to use scripts and manage Bootstrap classes.

This page presents a basic method to toggle the visibility of content, followed by an improved version with a small update.

Basic Hide / Show Components

Components can be hidden using Bootstrap classes:

• d-none: Hide elements
• invisible: Visibility

This allows you to hide parts of a character sheet in order to keep it more compact and readable.

Creating a collapsible container

When your character sheet contains large amounts of text, it can be useful to hide some of it to keep the sheet clear.

This is especially useful for Repeater views, which may contain a lot of text.

This tutorial methods show how to create a button that hide or display contente.

To do this, you will need to use scripting.

Define the content to hide

Place the content you want to hide inside a Column component, itself inside a Row component.

This way, you can easily hide or display the content.

To test, add or remove the d-none class from the Row component. Its child elements should show or hide accordingly.

Prepare the buttons

To control the hidden content, create two buttons:

• a Show button
• a Hide button

These two buttons will alternate to control the content display.

• If the content is visible by default → apply d-none to the "Show" button.
• If the content is hidden by default → apply d-none to the "Hide" button.

Script

The script should detect button clicks and act accordingly.

init = function(sheet) {
   if (sheet.id() === "main") {
       initMain(sheet);
   }
};
const initMain = function(sheet) {
   // initialize the main sheet
   initGlobalHideShow(sheet,"hideShow1_fold", "hideShow1_unfold", "hideShow1_extra");
};

const initGlobalHideShow = function (sheet, fold_button_id, unfold_button_id, extra_id) {
    log("START initGlobalHideShow");
    let fold_button = sheet.get(fold_button_id);
    let unfold_button = sheet.get(unfold_button_id);
    let extra = sheet.get(extra_id);
    fold_button.on("click", function () {
        toggleExtra(extra, fold_button, unfold_button, false);
    });

    unfold_button.on("click", function () {
        toggleExtra(extra, fold_button, unfold_button, true);
    });

    log("END initGlobalHideShow");
}

const toggleExtra = function (extra_comp, fold, unfold, visibility) {
    log("START toggleExtra");
    if (visibility) {
        extra_comp.show();
        fold.show();
        unfold.hide();
    } else {
        extra_comp.hide();
        fold.hide();
        unfold.show();
    }
    log("END toggleExtra");
}

This simple method is easy to build but has some limitations. The first one is that if the page is reloaded, all the content will return to its original state.