Сделал это обычным спойлером. Инфоблок Список новостей.
Код PHP
Код |
---|
<?foreach($arResult["ITEMS"] as $arItem):?>
<?
$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
?>
<?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
<div class="treeHTML">
<b><?=$arProperty["NAME"]?>:</b>
<?=implode($arProperty["DISPLAY_VALUE"]);?>
<?=$arProperty["DISPLAY_VALUE"];?></br>
<details class="faq"><summary class="faq-plus">
<b>Показать ответ</b>
</summary>
<div>
<?=$arItem["PREVIEW_TEXT"]?>
</div>
</details>
</div>
<br />
<?endforeach;?>
|
Код стилей
Код |
---|
div.news-list
{
word-wrap: break-word;
}
div.news-list img.preview_picture
{
float:left;
margin:0 4px 6px 0;
}
.news-date-time {
color:#486DAA;
}
details summary::-webkit-details-marker {
display: none;
transition: 1s;
animation: spoiler 1s;
}
details summary:before {
content: " + ";
transition: 1s;
animation: spoiler 1s;
will-change: translate,rotate;
transform: translate(-50%,-50%) rotate(-90deg);
}
details[open] summary:before {
content: " - ";
animation: spoiler 1s;
transition: 1s;
will-change: translate,rotate;
transform: translate(-50%,-50%) rotate(-90deg);
animation-name: slideDown;
animation-duration: 200ms;
animation-timing-function:cubic-bezier(0, 0, 1, 0);
}
details summary .faq, .faq-plus {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
transition: color .3s; /* плавная смена цвета */
cursor: pointer; /* изменение курсора при наведении */
animation: spoiler 1s;
animation-name: slideDown;
animation-duration: 200ms;
animation-timing-function:cubic-bezier(0, 0, 1, 0);
}
|