Disable, hide, or expand categories

  • Categories can be disabled to prevent users from opening them and skip them in keyboard navigation.

  • Hidden categories are not displayed in the toolbox but can be shown later using JavaScript.

  • Categories containing nested categories can be expanded to show their sub-categories, which are collapsed by default.

You can disable, hide, or expand categories.

Disable categories

A disabled category will not allow a user to open the category and it will be skipped during keyboard navigation.

var category = toolbox.getToolboxItems()[0];
category.setDisabled('true');

When a category is disabled, a 'disabled' property is added to the DOM element, which allows you to control the look of a disabled category.

.blocklyToolboxCategoryContainer[disabled="true"] {
  opacity: .5;
}

Hide categories

A hidden category will not be shown as part of the toolbox.

JSON

{
  "kind": "category",
  "name": "...",
  "hidden": "true",
}

XML

<category name="..." hidden="true"></category>

Hidden categories can later be shown via JavaScript.

var category = toolbox.getToolboxItems()[0];
category.hide();
// etc...
category.show();

Expand categories

This only applies to categories which contain other nested categories.

An expanded category will show you its sub categories. By default, nested categories are collapsed, and need to be clicked to be expanded.

JSON

{
  "kind": "category",
  "name": "...",
  "expanded": "true",
}

XML

<category name="..." expanded="true"></category>