Are you familiar with the concept of an 'accordion'? How can this component be implemented without JavaScript?

An "accordion" is a UI component where blocks of content can be expanded and collapsed.

Implementing an accordion without JavaScript can be done using HTML and CSS, utilizing checkboxes or radio buttons and the :checked selector.

Example implementation using <input type="checkbox">:

<style>
  .accordion input {
    display: none;
  }
  .accordion label {
    display: block;
    padding: 10px;
    background: #eee;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  .accordion .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0 10px;
  }
  .accordion input:checked + label + .content {
    max-height: 200px; /* or auto, but with max-height better for animation */
    padding: 10px;
  }
</style>

<div class="accordion">
  <input type="checkbox" id="section1" />
  <label for="section1">Header 1</label>
  <div class="content">
    <p>Content of section 1</p>
  </div>

  <input type="checkbox" id="section2" />
  <label for="section2">Header 2</label>
  <div class="content">
    <p>Content of section 2</p>
  </div>
</div>

This approach allows sections to be expanded and collapsed without JavaScript, using only CSS and HTML.

If you need an accordion where only one section is open at a time, you can use radio buttons instead of checkboxes.