How to make an accordion type menu on Bitrix with JQ?

Question

JavaScript

Hello. How to do the following in JQuery
On the page mysite.ru/test/ there is a menu type
Section1
Section2
at this stage it has hidden elements.
I need that when clicking on Section 1, the page mysite.ru/test/section 1 opens
and the menu looks like
Section1
Element
Section2
That is, if the section is active, we show its elements.
Bitrkis site. I know how to do this not on Bitrix. It's harder to get under it. Tell me please.
Menu type code

<ul class="nav ">
 <?foreach ($arResult["SECTIONS"] as $arSection) {?>
        <li  class="mainsection"><a href="<?=SITE_DIR?>services/<?=$arSection['CODE']?>/"><span class="tabs-heads"><?=$arSection['NAME']?></span><i class="right-arr"></i></a></li>                                   
           <?if ($arSection["ELEMENTS"]) {?>
               <?foreach ($arSection["ELEMENTS"] as $arSubSection) {?>
          <li class="itemlist" style="display:none"><a href="<?=$arSubSection["DETAIL_PAGE_URL"]?>" ><i class="fa fa-align-justify dept-tabs-icon"></i><span class="tabs-heads"><?=$arSubSection["NAME"]?></span><i class="right-arr"></i></a></li>
                <?}?>
            <?}?>
    <?}?>
</ul>

Answer 1

At least you need to have a two-level menu in which there will be a site structure of the form
In general, just copy and customize the standard multi-level menu component, it displays information in the form you need.
Here and here .

Answer 2

Hello, pretty handy sorgalla.com/jcarousel