Porsche Design System

Accordion

Table of Contents

Sticky headline
Custom clickable/focusable area

Sticky headline#

The headline can be made sticky by adding the property sticky to the p-accordion tag. The position top value can be overwritten by using the CSS Custom Property --p-accordion-position-sticky-top.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-accordion heading="Some Heading" sticky="true" class="[--p-accordion-position-sticky-top:56px]">
  <p-text>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
  </p-text>
</p-accordion>
<script>
  const pAccordion = document.querySelector("p-accordion");
  pAccordion.addEventListener('update', (e) => e.target.open = e.detail.open);
</script>
</body>
</html>

Custom clickable/focusable area#

Sometimes it might be useful to enlarge the clickable/focusable area to fulfill accessibility guidelines. Therefore, a custom padding can be set on the slotted heading element.

Some slotted heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore agna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-accordion>
  <span slot="heading" class="p-static-md">
    Some slotted heading
  </span>
  <p-text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore agna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </p-text>
</p-accordion>
<script>
  const pAccordion = document.querySelector("p-accordion");
  pAccordion.addEventListener('update', (e) => e.target.open = e.detail.open);
</script>
</body>
</html>