Телеграм: @bazarow_ru mihail@bazarow.ru Проверяю почту и телеграм 2-3 раза в день.
С 1 по 10 января 2024 будет сделан редизайн сайта.
Пришла пора освежиться!

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

Просмотров: 12934

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

Итак, спойлер сделать достаточно просто. Для этого подключаем в шаблоне библиотеку 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_content').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 написал:
тестирую как выглядит спойлер     Скрытый текст       спойлер может выглядеть вот так
ор

работает  :D