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?

*, *::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: '-';
}

/* Styling */
details {
  border-bottom: 1px solid #eee;
  padding: 1rem;
}
:not(details) + details,
details:first-of-type {
  border-top: 1px solid #eee;
}

summary {
  margin-bottom: 0;
  font-weight: 700;
}
summary + * {
  margin-top: 1rem;
}