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
   initHideShow(sheet,"hideShow1_fold", "hideShow1_unfold", "hideShow1_extra");
};

const initHideShow = function (sheet, fold_button_id, unfold_button_id, extra_id) {
    log("START initHideShow");
    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 initHideShow");
}

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.

Improved Hide / Show Components

To solve the issue where the content always returns to its original state after the page is reloaded, you need to save its state.

To achieve this, use a checkbox that will be checked or unchecked depending on the visibility of the content.

With this method, the visibility state is preserved. When the character sheet is initialized, you simply check the checkbox value and display the content according to the saved state.

init = function(sheet) {
    if (sheet.id() === "main") {
        initMain(sheet);
    }
};

const initMain = function(sheet) {
   // initialize the main sheet
   initHideShowSave(sheet,"hideShow2_fold", "hideShow2_unfold", "hideShow2_extra","hideShow2_save");
};

const initHideShowSave = function (sheet, fold_button_id, unfold_button_id, extra_id, visibility_id) {
    log("START initHideShowSave");
    let fold_button = sheet.get(fold_button_id);
    let unfold_button = sheet.get(unfold_button_id);
    let visibility = sheet.get(visibility_id);
    let extra = sheet.get(extra_id);

    fold_button.on("click", function () {
        toggleExtra(extra, fold_button, unfold_button, false);
        visibility.value(false);
    });

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

    toggleExtra(extra,fold_button,unfold_button,visibility.value());
    log("END initHideShowSave");
}

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");
}