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

6690| 0 Автор: skewslalm skewslalmBX (skewslalm)

Итак, спойлер сделать достаточно просто. Для этого подключаем в шаблоне библиотеку 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_body']").hide('normal');
$(this).parent().children('div.spoiler_body').toggle('normal');
}
else $("div[class^='spoiler_body']").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>   - что бы новости реагировали на клик не одновременно.

Пример работы у меня Вопросы по битрикс

Все заметки
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти
Напомнить пароль

Быстрая регистрация через соц.сеть:
Случайные заметки из блога
Табы из свойств инфоблока в Битрикс

Думаю все знают что такое табы или вкладки. Расскажу как на ...

Подключение SSL на Битрикс виртуальная машина

Для некоторых сервисов, типа Яндекс Касса, требуется наличие...

Дополнительные картинки в списке элементов каталога битрикс

Очень редко, но бывают ситуации, когда надо вывести дополнительные...

Умный фильтр на главной странице Битрикс

Достаточно редкая но востребованная задачка- это вывести компонент...

Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс

Достаточно часто, при проверке параметров системы, в Битрикс,...

Ускорение сайта Битрикс на ubuntu server, Memcached.

До сегодняшнего дня арендовал виртуальный сервер в Германии ...

Свежие комментарии в блоге
Самодельная форма добавления элемента на API Битрикс

Здравствуйте! А вот вопрос как пользователю в месте с элементом создать раздел в котором он будет на...

25.07.2017 / Александр Иванов
Очистка корзины битрикс одним нажатием

[url=/blog-note/1412/]Очистка корзины битрикс одним нажатием[/url] В стандартной корзине Битрикс...

24.07.2017 / Михаил Базаров
Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.

[QUOTE][USER=1631]Интересующийся многим[/USER] пишет: Михаил, добрый день! что-то ссылка [url]http...

22.07.2017 / Михаил Базаров
Всплывающее окно с формой обратной связи Битрикс

Подскажите почему может не работать скрипт  BX.ajax.onload_943827 = function() {           setTime...

19.07.2017 / Рима Уколова
Вывести товары из того же раздела в карточке товара

Михаил, скажите пожалуйста, этот метод еще актуален? Никак не могу передать ни id ни символьный код,...

19.07.2017 / Алексей Сель

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

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

x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения:

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