The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

Details

<pc-details>

0.5.1

experimental

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

<pc-details summary="Toggle me">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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)">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </pc-details>
    <pc-details variant="filled outlined" summary="Filled + Outlined">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </pc-details>
    <pc-details variant="filled" summary="Filled">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </pc-details>
    <pc-details variant="plain" summary="Plain">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </pc-details>
</div>

Code

Edit

Disabled#

Use the disabled attribute to prevent the details from expanding.

<pc-details summary="Disabled" disabled>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </pc-details>

    <pc-details summary="Second">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </pc-details>

    <pc-details summary="Third">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </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 attributes and properties.

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.
`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.1/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.1/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