Details

A details layout component for expandable content blocks and accessible accordion-like sections.

Import

import { Details } from "@schukai/monster/source/components/layout/details.mjs";

Source

View source code

Package

@schukai/monster

Since

3.74.0

Hi, I am a detail.

Introduction

The Monster Details component expands or collapses a titled content block. Use it for FAQs, inline explanations or accordion-like sections where the heading itself should act as the entry point.

When to use Details

Use it for titled disclosure sections: The heading gives clear orientation before opening.
Use it for grouped expandable content: Several details blocks can form a readable accordion pattern.
Do not use it for arbitrary hidden layout hacks: The section title and content relationship should stay meaningful.

Typical mistakes

Avoid vague titles like “More”. A details block works best when the closed state already communicates what users will reveal.

Details Simple

This example shows how a simple example works with the detail control. The detail control is a simple way to show and hide content.

Yeah, you opened me!

Javascript

import "@schukai/monster/source/components/layout/details.mjs";

HTML

<monster-details>
    Yeah, you opened me!
</monster-details>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Details With Label

In this example, we have chosen a separate button labeling. We have done this with the data-monster-option-labels-button="click me" attribute.

Yeah, you opened me!

Javascript

import "@schukai/monster/source/components/layout/details.mjs";

HTML

<monster-details data-monster-option-labels-button="click me">
    Yeah, you opened me!
</monster-details>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Details As Accordion

In this example, we will demonstrate how to turn a detail control into a drop-down menu. To achieve this, you simply have to write two or more controls directly below each other.

Yeah, you opened me!

No, you opened me.

Or did you open me?

Javascript

import "@schukai/monster/source/components/layout/details.mjs";

HTML

<monster-details data-monster-option-labels-button="click me">
    Yeah, you opened me!
</monster-details>
<monster-details data-monster-option-labels-button="click me">
    No, you opened me.
</monster-details>
<monster-details data-monster-option-labels-button="click me">
    Or did you open me?
</monster-details>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Details With Your Own Design

In this example, we will demonstrate how to turn a detail control into a drop-down menu. To achieve this, you simply have to write two or more controls directly below each other.

Yeah, you opened me!

Javascript

import {registerCustomElement} from "@schukai/monster/source/dom/customelement.mjs";
import {Details} from "@schukai/monster/source/components/layout/details.mjs";

class MyOwnDetails extends Details {
    /**
     * @return {string}
     */
    static getTag() {
        return "my-own-details";
    }

    /**
     * @returns {object}
     */
    get defaults() {
        return Object.assign({}, super.defaults, {
            templates: {
                // we define the main template here
                main:`
<style>
button {
    border: 0;
    border-bottom: 1px solid var(--monster-bg-color-primary-4);
    display: flex;
    justify-content: space-between;
}
</style>

        <div data-monster-role="control" class="overflow-hidden">
            <div data-monster-role="summary">
                <button data-monster-role="button">
                        <div data-monster-replace="path:labels.button | default:the default label"></div>
                        <div><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
</svg></div>
                </button>
            </div>
            <div data-monster-role="detail">
                <div data-monster-attributes="class path:classes.container"
                     data-monster-role="container">
                    <slot></slot>
                </div>
            </div>
        </div>`,
            }
        });
    }

}

// here, we register the custom element
registerCustomElement(MyOwnDetails);<script type="module">import {registerCustomElement} from "@schukai/monster/source/dom/customelement.mjs";
import {Details} from "@schukai/monster/source/components/layout/details.mjs";
import "@schukai/monster/source/components/style/border.pcss";

// The run.mjs script should be identical to the script.mjs in function. However, 
// in contrast to script.mjs, this script is executed on the document page. 
// Therefore, it must differ in terms of its practicability.

class MyOwnDetails extends Details {
    /**
     * @return {string}
     */
    static getTag() {
        return "my-own-details";
    }

    get defaults() {
        return Object.assign({}, super.defaults, {
            templates: {
                main:`
<style>
button {
    border: 0;
    border-bottom: 1px solid var(--monster-bg-color-primary-4);
    display: flex;
    justify-content: space-between;
}
</style>


        <div data-monster-role="control" class="overflow-hidden">
            <div data-monster-role="summary">
                <button data-monster-role="button">
                        <div data-monster-replace="path:labels.button | default:the default label"></div>
                        <div><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
</svg></div>
                </button>
            </div>
            <div data-monster-role="detail">
                <div data-monster-attributes="class path:classes.container"
                     data-monster-role="container">
                    <slot></slot>
                </div>
            </div>
        </div>`,
            }
        });
    }    
    
}


registerCustomElement(MyOwnDetails);</script>

HTML

<my-own-details data-monster-option-labels-button="click me">
    Yeah, you opened me!
</my-own-details>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The Monster Details component builds on the Collapse component by adding a button to toggle visibility of detailed content. Encapsulated within the Shadow DOM, the component ensures a consistent and isolated layout and behavior. This design allows it to function seamlessly as a standalone toggle or as part of an accordion structure.

Shadow DOM and Accessibility

The Shadow DOM ensures that the internal structure of the Monster Details component remains protected from external styles and scripts. It includes accessibility features such as ARIA roles and keyboard interaction support, making it usable for all users, including those relying on assistive technologies.

Customizing Through Exported Parts

The Monster Details component exposes specific exported parts for targeted styling using the CSS part selector. These parts enable customization of the button, container, and decorative elements.

Available Part Attributes

control: Represents the entire details container, including the button and collapsible content.
summary: Refers to the button container area, which triggers the toggle.
button: Targets the button element used to toggle visibility.
container: Refers to the collapsible content area.
deco-line: Styles the decorative line used for visual separation.
slot: Represents the slot where custom content can be added.

Below is an example of how to customize the Monster Details button and content area using the CSS part attributes.


monster-details::part(control) {
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

monster-details::part(button) {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

monster-details::part(container) {
    padding: 16px;
    background-color: #f8f9fa;
    color: #333;
    font-size: 1rem;
}

monster-details::part(deco-line) {
    height: 2px;
    background-color: #007bff;
    margin-top: 8px;
}

Explanation of the Example

monster-details::part(control): Styles the main container with a light border and rounded corners.
monster-details::part(button): Customizes the toggle button with padding, background color, and a hover effect.
monster-details::part(container): Styles the collapsible content area with padding and background color.
monster-details::part(deco-line): Adds a decorative line with a blue background color.

Accessibility

The Monster Details component is designed with accessibility in mind:

Keyboard Navigation: The button can be toggled using the Space or Enter keys.
ARIA Roles: Proper ARIA roles and attributes indicate the open or closed state of the content.
Focus Management: Focus remains on the button during toggle, ensuring seamless keyboard navigation.

These features ensure an inclusive experience for all users, especially those relying on assistive technologies.

HTML Structure

<monster-details></monster-details>

JavaScript Initialization

const element = document.createElement('monster-details');
document.body.appendChild(element);

Exported

Details

Derived from

Collapse

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the Collapse.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

button

object

undefined

Button configuration

button.label

string

undefined

Button label

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the Collapse.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the Collapse.

Constructor

constructor()

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{void}

connectedCallback()

Returns

{void}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.