Спойлер в списке новостей Битрикс

Иногда нужно сделать спойлеры в копонентах Битрикс, в основном конечно, имеет смысл при очень больших обьемах контента. Скорее всего в каталогах, но для простоты опишу как это делается в компоненте новостей Битрикс при выводе анонса.

Итак, спойлер сделать достаточно просто. Для этого подключаем в шаблоне библиотеку jQuery, можно скачать и положить в шаблон с компонентом, а можно и подключить со стороны:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
 </script>

Далее добавляем следующий JavaScript код, отвечающий за плавное открытие и скрытие спойлеров:

<script type="text/javascript"> 
 $(document).ready(function(){ 
     $('.spoiler_links').click(function(){ 
        if ($(this).parent().children('div.spoiler_body').css("display")=="none") { 
          $("div[class^='spoiler_content']").hide('normal'); 
          $(this).parent().children('div.spoiler_content').toggle('normal'); 
        } 
        else $("div[class^='spoiler_content']").hide('normal'); 
         return false; 
     }); 
 }); 
 </script>

Что бы спойлеры по умолчанию были закрыты:

<style type="text/css"> 
     .spoiler_content {display:none; cursor:pointer;} 
</style>

И интегрируем в шаблон вывода компонента новости news.list вот такой код-

1. Для заголовка новости:

<?if($arParams["DISPLAY_NAME"]!="N" && $arItem["NAME"]):?> 
<a href="<?=$arItem["DETAIL_PAGE_URL"]?>" class="spoiler_links"><?echo $arItem["NAME"]?></a> 
<?endif;?>

2. Для вывода контентной части анонса:

  
<?if($arParams["DISPLAY_PREVIEW_TEXT"]!="N" && $arItem["PREVIEW_TEXT"]):?> 
<div class="spoiler_content"><?echo $arItem["PREVIEW_TEXT"];?></div> 
<?endif;?>

3. Весь вывод новости заключаем в <div>весь вывод</div>   - что бы новости реагировали на клик не одновременно.

Екатерина Аристова 13.03.2020

Скрытый текст
Цитата Пример работы у меня Вопросы по битрикс Не работает ссылка на пример

Михаил Базаров 13.03.2020

Цитата
Екатерина Аристова написал:     Скрытый текст         Цитата Пример работы у меня  Вопросы по битрикс Не работает ссылка на пример

Да, заметка старая. Этого раздела уже нет.
Способ рабочий, делал не давно по нему

PS Может не работать с jquery-3 и выше.

Guest 15.03.2022

тестирую как выглядит спойлер

Скрытый текст
спойлер может выглядеть вот так ор

Михаил Базаров 15.03.2022

Цитата
Guest написал: тестирую как выглядит спойлер     Скрытый текст       спойлер может выглядеть вот так ор

работает