Details

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

Demos

Disabled

Use the disabled attribute to disable the details component.

<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

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

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-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 type="module">
  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>

<style>
  .details-group pc-details:not(:last-of-type) {
      margin-bottom: var(--pc-spacing-s);
  }
</style>

Code

Properties

Name	Description	Default
`dependencies`	`object`	`{ "pc-icon": PcIcon }`
`details`	`HTMLDetailsElement`	-
`header`	`HTMLElement`	-
`body`	`HTMLElement`	-
`expandIconSlot`	`HTMLSlotElement`	-
`detailsObserver`	`MutationObserver`	-
`disabled`	`boolean`	`false`
`open`	`boolean`	`false`
`summary`	`string \| undefined`	-
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	-

Learn more about attributes and properties.

Methods

Name	Description	Arguments
`handleOpenChange()`		-
`show()`		-
`hide()`		-

Learn more about methods.

Importing

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

Script

Import

Bundler

To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.

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

To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/details/details.js";

To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:

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