Реализовать кнопку "скрыть"

<st yle>
      .hide {display: none;}
   </style>
   
   <ul class="nav nav-tabs catalog-tabs" id="sectionTab" role="tablist">
       <li class="nav-item">
           <a class="nav-link" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Описание</a>
       </li>
   </ul>
   <div class="tab-content catalog-tab-content" id="sectionTabContent">
       <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
           <div class="catalog-bottom-sections">
               <!--googleoff: all-->


                   <p>Тест скрыть этот текст</p>
               <p>Тест скрыть этот текст</p>
               <p>Тест скрыть этот текст</p>
       
               <!--googleon: all-->
           </div>
       </div>

    <sc ript>
        window.onl oad=function(){
      
         console.log('Закрыть/открыть описание');
         let link_button = document.querySelector('#description-tab');
         
         let description_block = document.querySelector('#sectionTabContent');
         
         link_button.addEventListener("click", function(){
         
            if(description_block.classList.contains('hide')) {
               link_button.innerText = "Закрыть описание";
               description_block.classList.remove('hide');
            } 
            else {
               link_button.innerText = "Открыть описание";
               description_block.classList.add('hide');
            }
         
         });
      
      }
    </sc ript>

}
   ?>
<st yle>      .hide {display: none;}
   </style>
<ul class="nav nav-tabs catalog-tabs" id="sectionTab" role="tablist">
       <li class="nav-item">
           <a class="nav-link" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Описание</a>
       </li>
   </ul>
   <div class="tab-content catalog-tab-content" id="sectionTabContent">
       <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
           <div class="catalog-bottom-sections">
               <!--googleoff: all-->


                   <?=$parentSection['DESCRIPTION'];?>
       
               <!--googleon: all-->
           </div>
       </div>    

<sc ript>        window.onl oad=function(){
      
         console.log('Закрыть/открыть описание');
         let link_button = document.querySelector('#description-tab');
         
         let description_block = document.querySelector('#sectionTabContent');
         
         link_button.addEventListener("click", function(){
         
            if(description_block.classList.contains('hide')) {
               link_button.innerText = "Закрыть описание";
               description_block.classList.remove('hide');
            } 
            else {
               link_button.innerText = "Открыть описание";
               description_block.classList.add('hide');
            }
         
         });
      
      }
    </sc ript>

// Для подключения скриптов
$APPLICATION->AddHeadScript('/local/components/<Ваш-шаблон>/catalog/templates/<шаблон-компонента>/hide-toggler.js' );
echo "SITE_TEMPLATE_PATH";
// Подключение css
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/file.css", true);

use Bitrix\Main\Page\Asset;

// Для подключения css
Asset::getInstance()->addCss("/bitrix/css/main/bootstrap.min.css");

// Для подключения скриптов
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/myscripts.js");