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

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

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

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

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

Ajax форма обратной связи, реализация в битрикс Просмотров: 8680 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Вывести компонент новостей на страницу в Битрикс Просмотров: 65107 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Если товар в корзине, поменять кнопку на "В корзине" в новом шаблоне ... Просмотров: 1769 Ранее я уже делал заметку на эту тему. Тогда, мы меняли значение input-а при добавлении то... Удалить товары из корзины, если есть определенные товары. Просмотров: 1915 Задача: если в корзину добавлены товары с определенным свойством, нужно удалить из корзины... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 20892 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Заполнить коэффициент единицы измерения (MEASURE_RATIO) из свойства э... Просмотров: 6468 Задачка: Каталог наполняется из 1С, но 1С не передает коэффициент единицы измерения (особе... Дать пользователю возможность быстро отредактировать материал Просмотров: 4945 На одном из разрабатываемых сайтов, пользователи формирую его контент. После регистрации, ... Связанные элементы в карточке товара, с помощью catalog.section Просмотров: 15728 Достаточно часто, при разработке магазинов на битрикс, требуется выводить связанные элемен... Если папка то применяем...в Битрикс Просмотров: 30408 Бывает, стоит задача применить какой-либо стиль или вывести конкретный кусочек кода для ди... Вывести дополнительное пользовательское поле, использование полей в ф... Просмотров: 16768 Если вам нужно вывести дополнительное пользовательское поле типа "Привязка к разделам инфо... Вывести общее количество товаров в шаблоне корзины 1С-Битрикс Просмотров: 7035 Задача: вывести общее количество товаров в корзине (именно количество единиц товара, а не ... Спойлер в списке новостей Битрикс Просмотров: 12179 Иногда нужно сделать спойлеры в копонентах Битрикс, в основном конечно, имеет смысл при оч... Дополнительные картинки в новостях Битрикс, почти фотогалерея. Просмотров: 49498 Частенько стоит задача, по мимо стандартных "Картинка для анонса" и "Деталь... Увеличение диска на готовой виртуальной машине Битрикс Просмотров: 9813 Как всем известно, на официальном сайте 1С-битрикс можно скачать готовую виртуальную машин... Установить цену товара из свойства инфоблока Просмотров: 10052 На одном из проектов, нужно было единоразово заполнить цены товаров из свойства инфоблока... Добавление и удаление из сравнения на AJAX: Битрикс Просмотров: 18758 Рецепт лежал у меня в закромах, почти о нем и забыл, но тут подвернулся под руку- решил оп... Автоматически отгрузить заказ и сменить статус отгрузки, при выполнен... Просмотров: 951 Проблема: Заказы, на сайте, обрабатываются только в 1С. При этом 1С не работает с отгрузка... Вывести свойство отдельно ото всех или исключить из всех Просмотров: 7666 Иногда, на сайте, под управлением 1С-Битрикс, нужно вывести какое-то конкретное свойство о... Вывод элементов с помощью API битрикс Просмотров: 23961 Иногда, выводить элементы инфоблока с помощью компонентов, может оказаться избыточным. Нап... Быстрая отписка от всех рассылок модуля "E-mail маркетинг", в кабинет... Просмотров: 277 Задача: дать пользователям возможность отписаться от всех рассылок "E-mail маркетинга", не...