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

Просмотров: 8303 | Комментариев: 0

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

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


Что бы оставить комментарий к статье, нужно или зарегистрироваться

Кроме создания сайтов, я так же веду блог с заметками о вебразработке, записываю бесплатные видеоуроки и содержу форум, на котором можно задавать вопросы и просто общаться. Заметки, преимущественно - это короткие или подробные рецепты, по реализации часто требуемого функционала- в рамках разработки сайтов на 1С-Битрикс

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

Достаточно редкая но востребованная задачка- это вывести компонент "умный фильтр" на глвную страницу магазина на Битрикс. При этом так, что бы он отпр...

Увидеть файл заказов который передаст Битрикс в 1С

Достаточно часто, для диагностики обмена заказов, интернет-магазина на 1С Битрикс с 1С Управление Торговлей, нужно увидеть xml файл с заказами который...

Memcached на сайте под управлением битрикс, при использовании Веб Окружения Битрикс

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

Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс

Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одной заморочки: в типовой поставке нет выгрузки "sale_notes" -...

XML в формате Commerce ML-2, города России и Мира, для выгрузки в инфоблок Битрикс

Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и мира в виде элементов инфоблока. Забивать вручную это несус...

Получение местоположений через API Битрикс c поиском по select.

Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Битрикс. Данные местоположения можно использовать в любом мест...

Показать еще
Авторизация
Напомнить пароль Зарегистрироваться
Быстрый вход через соц. сеть