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

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

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

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

Просмотров: 10053 | Комментариев: 1

Комментарии

Внимание! все сообщения проходят премодерацию. Ваше сообщение появится после проверки
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Защита от автоматических сообщений
Загрузить файл
Нажимая кнопку "Отправить", Вы принимаете условия
Политики конфиденциальности и обработки персональных данных
Екатерина Аристова
Скрытый текст
Имя Цитировать
Михаил Базаров
Цитата
Екатерина Аристова написал:
    Скрытый текст        
Цитата
Пример работы у меня  Вопросы по битрикс

Не работает ссылка на пример
Да, заметка старая. Этого раздела уже нет.
Способ рабочий, делал не давно по нему

PS Может не работать с jquery-3 и выше.
Имя Цитировать
Поделиться страницей Спасибо, это помогает развивать сайт.
Мой youtube канал. Сюда я выкладываю видео уроки по разработке сайтов и не только. Подписывайтесь, скоро будет серия свежих видео-инструкций:
Перейти на канал
Заметки разработчика

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

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