如何创建嵌套的可折叠JS accordion？

<ul class="accordion">
  <li>
    <button class="accordion-title">Section 1</button>
    <div class="accordion-content">
      <ul class="accordion">
        <li>
          <button class="accordion-title">Subsection 1.1</button>
          <div class="accordion-content">
            Content for Subsection 1.1
          </div>
        </li>
        <li>
          <button class="accordion-title">Subsection 1.2</button>
          <div class="accordion-content">
            Content for Subsection 1.2
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <button class="accordion-title">Section 2</button>
    <div class="accordion-content">
      Content for Section 2
    </div>
  </li>
</ul>

$(document).ready(function() {
  $('.accordion-title').click(function() {
    $(this).next('.accordion-content').slideToggle();
  });
});