The accordion

<div class="accordion">
  <!-- Question 1: the heading holds the button that opens the answer -->
  <h3>
    <button
      type="button"
      id="accordion-button-1"
      aria-expanded="true"
      aria-controls="accordion-panel-1"
    >
      How do I change my password?
    </button>
  </h3>
  <!-- Answer 1: tied by aria-controls, closed by the script.
       No role="region": Chrome would keep each closed answer
       (until-found) in the list of landmarks, empty. -->
  <div id="accordion-panel-1">
    <p>
      In My account, open Security, then Change password.
      An email confirms the change.
    </p>
  </div>
  <!-- Questions 2 to 4: same structure -->
</div>

<script>
  // Without JavaScript, every answer stays readable:
  // the script closes them on load, then handles each button
  const buttons = document.querySelectorAll(
    '.accordion button[aria-controls]'
  );

  const panelOf = (button) =>
    document.getElementById(button.getAttribute('aria-controls'));

  // until-found: Ctrl+F finds the text of a closed answer
  const toggle = (button, open) => {
    button.setAttribute('aria-expanded', String(open));
    if (open) {
      panelOf(button).removeAttribute('hidden');
    } else {
      panelOf(button).setAttribute('hidden', 'until-found');
    }
  };

  for (const button of buttons) {
    toggle(button, false);
    button.addEventListener('click', () => {
      const open = button.getAttribute('aria-expanded') !== 'true';
      toggle(button, open);
    });
    // The browser's find in page opens the answer that holds the text
    panelOf(button).addEventListener('beforematch', () => {
      toggle(button, true);
    });
  }
</script>

/* The button takes the full width of the heading */
.accordion h3 button {
  display: flex;
  width: 100%;
  align-items: center;
  text-align: left;
}

/* A "+" that becomes "−". The empty alternative text keeps
   the sign out of the question name. The 1st declaration is
   a fallback for browsers that ignore this alternative text. */
.accordion h3 button::after {
  content: "−";
  content: "−" / "";
  margin-left: auto;
}

.accordion h3 button[aria-expanded="false"]::after {
  content: "+";
  content: "+" / "";
}