Details

<pc-details>

0.5.1

experimental

Details show a brief summary and expand to show additional content.

<pc-details summary="Toggle me">
    This section contains additional details that are hidden by default. Use details to progressively disclose content that isn’t required immediately, such as explanations, hints or secondary settings.
</pc-details>

Code

Edit

Demos

Variants

Use the variant attribute to change the details’ variant.

<div class="pc-stack">
    <pc-details variant="outlined" summary="Outlined (default)">
        Additional information is hidden until the summary is activated. This variant uses an outlined container to separate it from surrounding content.
    </pc-details>

    <pc-details variant="filled outlined" summary="Filled + Outlined">
        This variant combines a filled background with an outline. Use it when details need stronger visual emphasis.
    </pc-details>

    <pc-details variant="filled" summary="Filled">
        Filled details visually group related information and help distinguish expandable content from the rest of the page.
    </pc-details>

    <pc-details variant="plain" summary="Plain">
        The plain variant removes most visual styling and is best used in dense layouts or inline documentation.
    </pc-details>
</div>

Code

Edit

Disabled

Use the disabled attribute to prevent the details from expanding.

<pc-details summary="Disabled" disabled>
    This content cannot be expanded because the Details component is currently disabled. Disabled details remain visible but non‐interactive.
</pc-details>

Code

Edit

Customise the summary icon

Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively. To disable the animation, override the rotate property on the summary-icon part as shown below.

<pc-details summary="Toggle me" class="custom-icons">
    <pc-icon
        library="default"
        icon-style="solid"
        name="plus"
        slot="expand-icon"
    ></pc-icon>
    <pc-icon
        library="default"
        icon-style="solid"
        name="minus"
        slot="collapse-icon"
    ></pc-icon>

    You can replace the default summary icon using slots. This example uses plus and minus icons and disables the rotation animation.
</pc-details>

<style>
    pc-details.custom-icons::part(summary-icon) {
        rotate: none;
    }
</style>

Code

Edit

HTML in summary

To use HTML in the summary, use the summary slot. Links and other interactive elements will still retain their behaviour.

<pc-details>
    <span slot="summary">
        Ooh, look at
        <a href="https://example.com" rel="noreferrer noopener" target="_blank">
            this link</a>!
    </span>

    Interactive elements inside the summary slot retain their default behaviour. Use this sparingly and ensure the summary remains clear and concise.
</pc-details>

Code

Edit

RTL language support

The details component automatically adapts to RTL languages with the lang and dir attributes.

<pc-details summary="مزيد من المعلومات" lang="ar" dir="rtl">
    يتم استخدام عنصر التفاصيل لعرض محتوى إضافي يمكن إظهاره أو إخفاؤه حسب الحاجة، مع دعم كامل للغات من اليمين إلى اليسار.
</pc-details>

Code

Edit

Group details

Details are designed to function independently, but you can simulate a group or “accordion” where only one is shown at a time by listening for the pc-show event.

<div class="details-group pc-stack">
    <pc-details summary="First" open>
        Only one details element in this group can be open at a time. Opening another will automatically close the others.
    </pc-details>

    <pc-details summary="Second">
        This behaviour is implemented by listening to the <code>pc-show</code> event and updating the open state programmatically.
    </pc-details>

    <pc-details summary="Third">
        Grouping details like this is useful for FAQs, settings panels or step‐by‐step explanations.
    </pc-details>
</div>

<script>
    const container = document.querySelector(".details-group");

    container.addEventListener("pc-show", (event) => {
        if (event.target.localName === "pc-details") {
            [...container.querySelectorAll("pc-details")].map((details) => {
                details.open = event.target === details;
            });
        }
    });
</script>

Code

Edit

Properties

Name	Description	Default
`open`	Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you can use the `show()` or `hide()` methods and this attribute will reflect the details’ open state. Type: `boolean`	`false`
`summary`	The summary to show in the header. If you need to display HTML, use the `summary` slot instead. Type: `string \| undefined`	‐
`variant`	The details’ variant. Type: `"filled" \| "outlined" \| "plain"`	`"outlined"`
`disabled`	Disables the details so it can’t be toggled. Type: `boolean`	`false`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	‐

Learn more about customising animations.

Slots

Name	Description
(default)	The details’ main content.
`summary`	The details’ summary. Alternatively, you can use the `summary` attribute.
`expand-icon`	An optional expand icon to use instead of the default. Works best with `<pc-icon>`.
`collapse-icon`	An optional collapse icon to use instead of the default. Works best with `<pc-icon>`.

Learn more about using slots.

Methods

Name	Description	Arguments
`show()`	Shows the details.	‐
`hide()`	Hides the details.	‐

Learn more about methods.

Events

Name	Description	Event detail
`pc-show`	Emitted when the details opens.	‐
`pc-after-show`	Emitted after the details opens and all animations are complete.	‐
`pc-hide`	Emitted when the details closes.	‐
`pc-after-hide`	Emitted after the details closes and all animations are complete.	‐

Learn more about events.

Parts

Name	Description
`base`	The component’s base wrapper.
`header`	The header that wraps both the summary and the expand/collapse icon.
`summary`	The container that wraps the summary.
`summary-icon`	The container that wraps the expand/collapse icons.
`body`	The container of the details’ content.
`content`	The details’ content.

Learn more about customising CSS parts.

Animations

Name	Description
`details.show`	The animation to use when showing details. You can use both `height: auto` and `block-size: auto` with this animation.
`details.hide`	The animation to use when hiding details. You can use `height: auto` and `block-size: auto` with this animation.

Learn more about customising animations.

Importing

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/details/details.js"></script> 

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/details/details.js"; 

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

import "placer-toolkit/dist/components/details/details.js";

Dependencies

This component automatically imports these components:

Icon