Закрыть / свернуть меню аккордеона при нажатии за пределами меню

Question

У меня довольно сложное аккордеонное меню, в котором мне нужно сделать две вещи. Когда пользователь щелкает по меню, я хочу, чтобы оно: 1. закрывало / закрывало все вкладки И 2. закрывало / закрывало все элементы подменю.

Я не знаю никакого программирования, кроме html и css, поэтому у меня огромное количество проблем, чтобы заставить это меню аккордеона работать.

Я могу заставить его рушиться, когда я нажимаю на другие вкладки, но я не могу заставить присоску закрыться, когда я щелкаю за пределами меню (что я хочу, чтобы это делало тоже).

Я тоже новенький здесь, я понятия не имею, как это сделать.

У меня есть аккордеон с заголовком / кнопкой, subITEMS, и у некоторых тоже есть subMENU.

Вот пример того, что я получил:

        <!-- Accordion menu START -->
        <div id="accordion" class="panel-group" aria-multiselectable="true">
          <div class="list-group panel">

            <!-- Item 1 -->
            <a href="#morocco" role="button"  class="panel-heading list-group-item strong" data-toggle="collapse" data-parent="#accordion">Morocco <i class="more-less glyphicon glyphicon-triangle-right"></i></a>
            <div class="collapse" id="morocco">
              <ul>
                <li>
                  <a class="list-group-item strong" href="#">Homepage</a>
                  <ul>
                    <li>
                      <a class="list-group-item strong" href="="#">">Casablanca</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <!-- END Item 1  -->

            <!-- Item 2  basically the same as item 1  -->

            <!-- Item 3   -->
            <a href="#france" role="button" class="panel-heading list-group-item strong" data-toggle="collapse" data-parent="#accordion">France <i class="more-less glyphicon glyphicon-triangle-right"></i></a>

            <div class="collapse" id="france">
              <!-- Alsace -->
              <a class="list-group-item" href="="#"">Alsace</a>

              <!-- burgundy -->
              <a href="#burgundy" role="button" class="panel-heading list-group-item strong" data-toggle="collapse" data-parent="#burgundy">Burgundy <i class="more-less glyphicon glyphicon-menu-right"></i></a>

              <div class="collapse list-group-submenu list-group-submenu-1" id="burgundy">
                <ul>
                  <li>
                    <a href="="#"" class="list-group-item" data-parent="#burgundySubMenu">Homepage</a>
                    <ul>
                      <li>
                        <a class="list-group-item strong" href="#" target="_self">Dijon</a>
                      </li>
                </ul>
              </div>
            </div>
            <!-- END Item 3 -->
          </div>
        </div>
        <!-- Accordion END -->

Я использовал этот скрипт, чтобы закрыть подменю

  $(document).ready(function() {
    $('#france').on('hidden.bs.collapse', function() {
      console.log('triggered');
      $('#burgundy').collapse('hide');
    });
  });

но мне нужно, чтобы все меню аккордеона закрывалось / закрывалось, когда пользователь больше не использует меню... Я ненавижу меню, которые остаются открытыми, когда они не используются.

Любая помощь будет оооочень признательна... Я в своем уме!

И я прошу прощения за мой неаккуратный код... Я могу делать CSS и HTML, я не говорил, что у меня это хорошо получается!:)

Я забыл упомянуть... этот код ПОЧТИ работал...

<script>
$("html").click(function(event) {
    if ($(event.target).closest('#accordion, #burgundy').length === 0) {
          jQuery('.collapse').collapse('hide');
    }
});

</script>

это закрыло бы меню аккордеона, но оставило бы открытые вкладки, нажимая ВНУТРИ меню. Мне нужно, чтобы закрыть вкладки при нажатии на другую вкладку И закрыть все меню при нажатии за пределами меню.