При клике показать весь список на Bitrix

У меня такая "проблема", есть магазин на битриксе. В блоке отображаются все категории товаров, мне нужно сделать так, чтобы там отображались допустим 6 категории, и снизу есть кнопка "Показать все", чтобы при клике на эту кнопку открывалось весь список.

Код компонента:

<div class="left-menu" id="box">

<span class="block-title">Категории</span><span class="left-menu-title-count"><? echo $arSection['ELEMENT_CNT']; ?></span>
<?
if ('Y' == $arParams['SHOW_PARENT_NAME'] && 0 < $arResult['SECTION']['ID'])
{
    $this->AddEditAction($arResult['SECTION']['ID'], $arResult['SECTION']['EDIT_LINK'], $strSectionEdit);
    $this->AddDeleteAction($arResult['SECTION']['ID'], $arResult['SECTION']['DELETE_LINK'], $strSectionDelete, $arSectionDeleteParams);

    ?><h1
        class="<? echo $arCurView['TITLE']; ?>"
        id="<? echo $this->GetEditAreaId($arResult['SECTION']['ID']); ?>"
    ><a href="<? echo $arResult['SECTION']['SECTION_PAGE_URL']; ?>"><?
        echo (
            isset($arResult['SECTION']["IPROPERTY_VALUES"]["SECTION_PAGE_TITLE"]) && $arResult['SECTION']["IPROPERTY_VALUES"]["SECTION_PAGE_TITLE"] != ""
            ? $arResult['SECTION']["IPROPERTY_VALUES"]["SECTION_PAGE_TITLE"]
            : $arResult['SECTION']['NAME']
        );
    ?></a></h1><?
}
if (0 < $arResult["SECTIONS_COUNT"])
{
?>
<ul class="left-menu-ul">
<?
    switch ($arParams['VIEW_MODE'])
    {
        case 'LINE':
            foreach ($arResult['SECTIONS'] as &$arSection)
            {
                $this->AddEditAction($arSection['ID'], $arSection['EDIT_LINK'], $strSectionEdit);
                $this->AddDeleteAction($arSection['ID'], $arSection['DELETE_LINK'], $strSectionDelete, $arSectionDeleteParams);

                if (false === $arSection['PICTURE'])
                    $arSection['PICTURE'] = array(
                        'SRC' => $arCurView['EMPTY_IMG'],
                        'ALT' => (
                            '' != $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_ALT"]
                            ? $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_ALT"]
                            : $arSection["NAME"]
                        ),
                        'TITLE' => (
                            '' != $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_TITLE"]
                            ? $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_TITLE"]
                            : $arSection["NAME"]
                        )
                    );
                ?><li>
                <a
                    href="<? echo $arSection['SECTION_PAGE_URL']; ?>"
                    class="bx_catalog_line_img"
                    style="background-image: url('<? echo $arSection['PICTURE']['SRC']; ?>');"
                    title="<? echo $arSection['PICTURE']['TITLE']; ?>"
                ></a>   
    <a href="<? echo $arSection['SECTION_PAGE_URL']; ?>" id="section-link" class="left-menu-link"><? echo $arSection['NAME']; ?></a><?
                if ($arParams["COUNT_ELEMENTS"])
                {
                    ?> <span class="left-menu-count"><? echo $arSection['ELEMENT_CNT']; ?></span><?
                }
                ?><?
                if ('' != $arSection['DESCRIPTION'])
                {
                    ?><p class="bx_catalog_line_description"><? echo $arSection['DESCRIPTION']; ?></p><?
                }
                ?><div style="clear: both;"></div>
                </li><?
            }
            unset($arSection);
            break;
        case 'TEXT':
            foreach ($arResult['SECTIONS'] as &$arSection)
            {
                $this->AddEditAction($arSection['ID'], $arSection['EDIT_LINK'], $strSectionEdit);
                $this->AddDeleteAction($arSection['ID'], $arSection['DELETE_LINK'], $strSectionDelete, $arSectionDeleteParams);

                ?><li id="<? echo $this->GetEditAreaId($arSection['ID']); ?>"><h2 class="bx_catalog_text_title"><a href="<? echo $arSection['SECTION_PAGE_URL']; ?>"><? echo $arSection['NAME']; ?></a><?
                if ($arParams["COUNT_ELEMENTS"])
                {
                    ?> <span class="left-menu-count"><? echo $arSection['ELEMENT_CNT']; ?></span><?
                }
                ?></h2></li><?
            }
            unset($arSection);
            break;
        case 'TILE':
            foreach ($arResult['SECTIONS'] as &$arSection)
            {
                $this->AddEditAction($arSection['ID'], $arSection['EDIT_LINK'], $strSectionEdit);
                $this->AddDeleteAction($arSection['ID'], $arSection['DELETE_LINK'], $strSectionDelete, $arSectionDeleteParams);

                if (false === $arSection['PICTURE'])
                    $arSection['PICTURE'] = array(
                        'SRC' => $arCurView['EMPTY_IMG'],
                        'ALT' => (
                            '' != $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_ALT"]
                            ? $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_ALT"]
                            : $arSection["NAME"]
                        ),
                        'TITLE' => (
                            '' != $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_TITLE"]
                            ? $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_TITLE"]
                            : $arSection["NAME"]
                        )
                    );
                ?><li id="<? echo $this->GetEditAreaId($arSection['ID']); ?>">
                <a
                    href="<? echo $arSection['SECTION_PAGE_URL']; ?>"
                    class="bx_catalog_tile_img"
                    style="background-image:url('<? echo $arSection['PICTURE']['SRC']; ?>');"
                    title="<? echo $arSection['PICTURE']['TITLE']; ?>"
                    > </a><?
                if ('Y' != $arParams['HIDE_SECTION_NAME'])
                {
                    ?><h2 class="bx_catalog_tile_title"><a href="<? echo $arSection['SECTION_PAGE_URL']; ?>"><? echo $arSection['NAME']; ?></a><?
                    if ($arParams["COUNT_ELEMENTS"])
                    {
                        ?> <span class="left-menu-count"><? echo $arSection['ELEMENT_CNT']; ?></span><?
                    }
                ?></h2><?
                }
                ?></li><?
            }
            unset($arSection);
            break;
        case 'LIST':
            $intCurrentDepth = 1;
            $boolFirst = true;
            foreach ($arResult['SECTIONS'] as &$arSection)
            {
                $this->AddEditAction($arSection['ID'], $arSection['EDIT_LINK'], $strSectionEdit);
                $this->AddDeleteAction($arSection['ID'], $arSection['DELETE_LINK'], $strSectionDelete, $arSectionDeleteParams);

                if ($intCurrentDepth < $arSection['RELATIVE_DEPTH_LEVEL'])
                {
                    if (0 < $intCurrentDepth)
                        echo "\n",str_repeat("\t", $arSection['RELATIVE_DEPTH_LEVEL']),'<ul>';
                }
                elseif ($intCurrentDepth == $arSection['RELATIVE_DEPTH_LEVEL'])
                {
                    if (!$boolFirst)
                        echo '</li>';
                }
                else
                {
                    while ($intCurrentDepth > $arSection['RELATIVE_DEPTH_LEVEL'])
                    {
                        echo '</li>',"\n",str_repeat("\t", $intCurrentDepth),'</ul>',"\n",str_repeat("\t", $intCurrentDepth-1);
                        $intCurrentDepth--;
                    }
                    echo str_repeat("\t", $intCurrentDepth-1),'</li>';
                }

                echo (!$boolFirst ? "\n" : ''),str_repeat("\t", $arSection['RELATIVE_DEPTH_LEVEL']);
                ?><li id="<?=$this->GetEditAreaId($arSection['ID']);?>"><h2 class="bx_sitemap_li_title"><a href="<? echo $arSection["SECTION_PAGE_URL"]; ?>"><? echo $arSection["NAME"];?><?
                if ($arParams["COUNT_ELEMENTS"])
                {
                    ?> <span class="left-menu-count"><? echo $arSection["ELEMENT_CNT"]; ?></span><?
                }
                ?></a></h2><?

                $intCurrentDepth = $arSection['RELATIVE_DEPTH_LEVEL'];
                $boolFirst = false;
            }
            unset($arSection);
            while ($intCurrentDepth > 1)
            {
                echo '</li>',"\n",str_repeat("\t", $intCurrentDepth),'</ul>',"\n",str_repeat("\t", $intCurrentDepth-1);
                $intCurrentDepth--;
            }
            if ($intCurrentDepth > 0)
            {
                echo '</li>',"\n";
            }
            break;
    }
?>
</ul>
<?
    echo ('LINE' != $arParams['VIEW_MODE'] ? '<div style="clear: both;"></div>' : '');
}
?></div>
<a href="#" class="left-menu-all" id="toggler">Показать все <img src="<?=SITE_TEMPLATE_PATH?>/images/arrow-top.png" class="arrow-top"></a>
</div>


Ответы (0 шт):