details
  summary This is a details element accordion
  p Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem maxime beatae amet, enim ducimus debitis quaerat fugiat eaque? Voluptatibus accusantium dicta quaerat ea tempora explicabo blanditiis corrupti inventore asperiores qui?
details
  summary This is a details element accordion
  p Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem maxime beatae amet, enim ducimus debitis quaerat fugiat eaque? Voluptatibus accusantium dicta quaerat ea tempora explicabo blanditiis corrupti inventore asperiores qui?
details
  summary This is a details element accordion
  p Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem maxime beatae amet, enim ducimus debitis quaerat fugiat eaque? Voluptatibus accusantium dicta quaerat ea tempora explicabo blanditiis corrupti inventore asperiores qui?
View Compiled
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  padding: 4rem;
  max-width: 48rem;
  margin-right: auto;
  margin-left: auto;
}

/* Display the <details> element consistently */
details {
  display: block;
}
summary {
  display: list-item;
}

/* Highlight that the element is interactive */
summary {
  cursor: pointer;
}

/* Hide the default twistie */
/* Spec-compliant: */
summary {
  list-style-type: none;
}
/* Non-standard: */
summary::-webkit-details-marker {
  display: none;
}

/* Display a more common one */
summary {
  position: relative;
  padding-right: 1.5rem;
}
summary::after {
  content: '+';
  position: absolute;
  top: calc(50% - 0.5em);
  right: 0;
}
details[open] summary::after {
  content: '-';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.