Нужно сверстать блок(картинка 1) который при нажатии разворачивался и показывал другой блок(картинка 2). Подскажите пожалуйста, как это сделать?

$(document).ready(function () {
  $('.table-of-contents-header').each(function () {
    if ($(this).hasClass('opened')) {
      $('.table-of-contents__list', this).show();
    }
  });
});

$('.table-of-contents-header').on('click', function () {
    $(this).toggleClass('opened');
    $('.table-of-contents__list', this).toggle(300);
    if ($(this).hasClass('opened')) {
        $(this).siblings().removeClass('opened');
        $(this).siblings().children('.table-of-contents__list').hide(300);
    }
});

.table-of-contents {
  background: #f2f5f9;
  margin-bottom: 30px;
  line-height: 1.7;
}

.table-of-contents-header {
  padding: 15px 30px;
  font-weight: 700;
  font-size: 1.1em;
}

.table-of-contents__hide {
  cursor: pointer;
}

.table-of-contents__list {
  display: none;
  margin: 0 30px 0;
  padding: 0 0 15px 0;
  list-style: none;
}

.table-of-contents ol .level {
  margin-top: 0.4em;
  margin-bottom: 0.2em;
}

.table-of-contents ol li {
  padding-left: 0;
}

.table-of-contents li a {
  color: #111155;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Arial;
  line-height: 1.5;
  font-weight: 400;
  height: 100%;
}

<div class="table-of-contents">
  <div class="table-of-contents-header opened">
    <span class="table-of-contents__hide">Содержание</span>
    <ol class="table-of-contents__list">
      <li class="level">
        <a href="#">Хронология развития системы</a>
      </li>

      <li class="level">
        <a href="#">Разработка приложений в HarmonyOS</a>
      </li>

      <li class="level">
        <a href="#">Супер-устройство HarmonyOS</a>
      </li>

      <li class="level">
        <a href="#">Поддерживаемые устройства </a>
      </li>

      <li class="level">
        <a href="#">Бесплатная OC OpenHarmony</a>
      </li>
    </ol>
  </div>
  <div class="table-of-contents-header">
    <span class="table-of-contents__hide">Содержание 2</span>
    <ol class="table-of-contents__list">
      <li class="level">
        <a href="#">Хронология развития системы</a>
      </li>

      <li class="level">
        <a href="#">Разработка приложений в HarmonyOS</a>
      </li>

      <li class="level">
        <a href="#">Супер-устройство HarmonyOS</a>
      </li>

      <li class="level">
        <a href="#">Поддерживаемые устройства </a>
      </li>

      <li class="level">
        <a href="#">Бесплатная OC OpenHarmony</a>
      </li>
    </ol>
  </div>
  <div class="table-of-contents-header">
    <span class="table-of-contents__hide">Содержание 3</span>
    <ol class="table-of-contents__list">
      <li class="level">
        <a href="#">Хронология развития системы</a>
      </li>

      <li class="level">
        <a href="#">Разработка приложений в HarmonyOS</a>
      </li>

      <li class="level">
        <a href="#">Супер-устройство HarmonyOS</a>
      </li>

      <li class="level">
        <a href="#">Поддерживаемые устройства </a>
      </li>

      <li class="level">
        <a href="#">Бесплатная OC OpenHarmony</a>
      </li>
    </ol>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>