Телеграм: @camouf_ru Почта: mihail@bazarow.ru

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

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

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

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

работает  :D

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 745 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Ссылки для добавления и удаления товара из сравнения в Битрикс Просмотров: 8207 Просто оставляю это здесь, вставка ссылок на добавление и удаление товара из сравнения, ес... Вывести артикул в печатную форму бланка заказа Просмотров: 351 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 20139 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... FTP доступ на Виртуальной машине Битрикс Просмотров: 15890 Бывает что нужно открыть FTP доступ к заранее известной папке на сайте под управлением 1С ... Как подобрать редакцию Битрикс под задачи Просмотров: 6320 Последнее время, все чаще, при общении с заказчиками, сталкиваюсь с вопросом "— К... Кастомизация компонента восстановления пароля bitrix:system.auth.forg... Просмотров: 24736 Достаточно часто спрашивают как кастомизировать компонент восстановления пароля пользовате... Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружени... Просмотров: 25832 WebP это современный формат сжатия изображений, который позволяет, при правильных настройк... Глобальные фильтры на всякие случаи жизни Просмотров: 44461 Глобальный фильтр, нужен чаще всего, для вывода определенных элементов, из общего массива... Информация о заказах и содержимое корзины текущего пользователя. Просмотров: 11734 В процессе разработки сайта могут понадобиться рецепты приведенные ниже. Использовать можн... Вывести разделы инфоблока в которых находится элемент Битрикс Просмотров: 15983 Если нужно в карточке товара или новости, вывести структуру разделов в котором находится э... Увидеть файл заказов который передаст Битрикс в 1С Просмотров: 23269 Для диагностики обмена заказов, интернет-магазина на 1С Битрикс с 1С Управление Торговлей,... Сниппеты типографики bootstrap, для Битрикс Просмотров: 7575 Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstra... Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 53388 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Заполнить поля пользователя из свойства заказа, на примере ФИО Просмотров: 1170 При создании заказа покупатель заполняет поле "ФИО". Необходимо скопировать эти данные в п... Смена вида карточек товаров в catalog.section с иммитацией AJAX Просмотров: 782 Смену вида карточек товаров, в разделе каталога, можно реализовать с помощью сессии, запис... Заполнить свойство инфоблока ценой из торгового каталога Просмотров: 4568 Если вам по какой-то причине нужно скопировать цену товара в свойство этого же инфоблока. ... Пошагово получить информацию о заказах и сохранить как Excel (xls) Просмотров: 506 Задача: Нужно получить информацию о заказах с возможностью указания даты создания "от"" и ... Вывести производителей на сайте с отбором его товаров из каталога Просмотров: 18190 Достаточно частая задачка для каталога или интернет-магазина: вывести список производителе... Как вывести свойства инфоблока по отдельности и немного плюшек не в т... Просмотров: 105360 Если у инфоблока несколько свойств- то при выводе их всех, скажем в детальном описании нов...