Телеграм: @camouf_ru Почта: mihail@bazarow.ru
Лето Осень Зима Весна

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

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

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

Итак, спойлер сделать достаточно просто. Для этого подключаем в шаблоне библиотеку 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 и выше.
Guest15.03.2022
тестирую как выглядит спойлер
Скрытый текст
Михаил Базаров15.03.2022
Цитата
Guest написал:
тестирую как выглядит спойлер     Скрытый текст       спойлер может выглядеть вот так
ор

работает  :D

Цены и сроки на разработку проекта

Кроме того, готов взяться за разработку проектов любой сложности или выполнить доработки, корректировки и расширение функционала на уже работающих проектах.

Опросник на разработку:

Вы можете скачать развернутый опросник на разработку, заполнить и выслать на электронную почту.

Скачать опросник.doc

После ознакомления, я смогу задать уточняющие вопросы и оценить проект по стоимости и срокам разработки.

Заказать разработку