Как сделать так, чтоб разворачивающиеся элементы закрывались после клика по следующему элементу?

Есть такой код :

   <div class="toogle">
       <? $index = 1;?>
           <?foreach ($arResult['DELIVERY_TYPES'] as $deliveryType):?>
                <section class="toggle" id="delivery-type-<?= $index ?>">
                     <label><?= $deliveryType['NAME'] ?></label>
                         <div class="toggle-content">
                              <?= $deliveryType['DETAIL_TEXT'] ?>
                         </div>
                </section>
                <? $index++; ?>
          <?endforeach;?>
   </div>

И элементы на странице раскрываются по клику и закрываются по повторному клику, то есть самому section задаётся класс active, а контенту задаётся свойство disolay:block, как я понял, это какой-то стандартный функционал jquery, но дело в том, что мне нужно сделать так, чтобы если один элемент выбран, и после этого я выбираю другой, предыдущий должен сворачиваться. Попробовал написать такой код :

$(document).ready(function(){
    $('.toggle').click(function(){
        let togg = $('.toggle');
        $.each(togg, function (e) {
            if($(e).not($(this))){
                $(e).removeClass('active').children('.toggle-content').hide();
            }
        })
    })
})

Но не работает.. в общем логика такая, что когда мы кликаем по элементу, всем кроме этого элемента нужно удалить класс active а дочерним элементам сделать display: none