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

Скрытый текст | ||
---|---|---|
Не работает ссылка на пример |

Цитата | ||
---|---|---|
Екатерина Аристова написал: Скрытый текст
Не работает ссылка на пример |
Способ рабочий, делал не давно по нему
PS Может не работать с jquery-3 и выше.
Скрытый текст |
---|
спойлер может выглядеть вот так ор |

Цитата |
---|
Guest написал: тестирую как выглядит спойлер Скрытый текст спойлер может выглядеть вот так ор |
работает
