Content Accordion

HTML

<content-accordion>
  <content-spacing-wrapper max-width="80|50" horizontal-alignment="center">
    
      <content-button expanded="true" controls="question_1" clickable-block="true">
        <content-line style-class="text-style--faq-header">Fully Clickable</content-line>
        <p id="question_1">
          Answer 1
        </p>
      </content-button>
    
    
      <button aria-expanded="true" aria-controls="question_2">
        <content-line style-class="text-style--faq-header">Only the Button is clickable</content-line>
      </button>
      <p id="question_2">
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
      </p>
    
    
      <button aria-expanded="false" aria-controls="question_3">
        <content-line style-class="text-style--faq-header">Only the Button is clickable</content-line>
      </button>
      <p id="question_3">
        Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.
      </p>
    
  </content-spacing-wrapper>
</content-accordion>



<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

.text-style--faq-header {
  font-size: 3rem;
}

p {
  color: black;
}

[aria-expanded] {
  transition: all 1s;
}

[aria-expanded="true"] {
  background: #DDDDDD;
  padding: 20px 20px 40px;
}