Show or hide components

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.

image repeater expanded and repeater collapsed

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
   initContentVisibility(sheet,"content_to_hide_id", "hide_button_id", "show_button_id");
};
const initContentVisibility = function(sheet, extra_id, hide_button_id, show_button_id){
   // Get the button.
   let hideButton = sheet.get(hide_button_id);
   let showButton = sheet.get(show_button_id);
   let content = sheet.get(extra_id);
   // hide the content, show show_button and hide hide_button.
   const hideContent = function() {
       log("hide click");
       hideButton.hide();
       showButton.show();
       content.hide();
   };
   // show the contente, hide show_button and show hide_button.
   const showContent = function() {
       log("show click");
       hideButton.show();
       showButton.hide();
       content.show();
   };
   // show
   hideButton.on('click', hideContent);
   // hide
   showButton.on('click', showContent);
};