Только пользователям разрешено входить в центр администрирования. Войти

Виджеты HTML

Виджеты HTML«Виджет HTML» - это набор независимых HTML элементов для вставки на страницы сайта.Дополнительные блоки готовых элементов и иконок доступны при редактировании страниц, при нажатии кнопки «Библиотека блоков» или на странице Библиотека блоков

Accordion

Accord 1

Аккордеон представляет собой интерфейс, который позволяет пользователю открывать и скрывать содержимое, щелкая по заголовкам.
Accord 2

Аккордеон представляет собой интерфейс, который позволяет пользователю открывать и скрывать содержимое, щелкая по заголовкам.
Accord 3

Аккордеон представляет собой интерфейс, который позволяет пользователю открывать и скрывать содержимое, щелкая по заголовкам.

Для вставки данного блока, скопируйте код из поля ниже и вставьте на необходимой странице:

<div class="hotlist-html-widget-accordion">
    <ul>
      <li>
        <p>Accord 1</p>
        <div>
          Аккордеон представляет собой интерфейс, который позволяет пользователю открывать и скрывать содержимое, щелкая по заголовкам.
        </div>
      </li>
      <li>
        <p>Accord 2</p>
        <div>
          Аккордеон представляет собой интерфейс, который позволяет пользователю открывать и скрывать содержимое, щелкая по заголовкам.
        </div>
      </li>
      <li>
        <p>Accord 3</p>
        <div>
          Аккордеон представляет собой интерфейс, который позволяет пользователю открывать и скрывать содержимое, щелкая по заголовкам.
        </div>
      </li>
      
    </ul>
  </div>
</div>

header.addEventListener(`click`, function(){
        const content = this.nextElementSibling;
        if(!content) return;

if(content.style.display === "block"){
          content.style.display = "none";
          this.dataset.active = "0";
        } else {
          content.style.display = "block";
          this.dataset.active = "1";
        }

initAccordion(document);

</script>

Tabs

Tab 1 Tab 2 Tab 3 Tab 4

Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам.

Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам. #2

Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам. #3

Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам. #4

Для вставки данного блока, скопируйте код из поля ниже и вставьте на необходимой странице:

<div class="hotlist-html-widget-tabs" data-tabs="1">
  <input type="radio" id="button_tabs-1" name="button_tab" checked="checked">
  <label for="button_tabs-1">Tab 1</label>

<div class="hotlist-html-widget-tabs-block">
    <div id="tabs-1">Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам.</div>
    <div id="tabs-2">Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам. #2 </div>
    <div id="tabs-3">Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам. #3</div>
    <div id="tabs-4">Вкладки представляют собой интерфейс, который позволяет пользователю переключать и отображать различное содержимое, щелкая по заголовкам. #4</div>
  </div>
</div>

.hotlist-html-widget-tabs::before {
  content: "";
  float: left;
  height: 40px;
  display: block;
  width: 100%;
  clear: both;
}

.hotlist-html-widget-tabs {
  clear: both;
  overflow: hidden;
  -webkit-transition: 0.3s box-shadow ease;
  transition: 0.3s box-shadow ease;
  max-width: 100%;
  width: 100%;
  display: block;
  position: relative;
  background-color: #fff;
  margin: 0 0 20px;
}

.hotlist-html-widget-tabs #button_tabs-1:checked ~ .hotlist-html-widget-tabs-block #tabs-1,
.hotlist-html-widget-tabs #button_tabs-2:checked ~ .hotlist-html-widget-tabs-block #tabs-2,
.hotlist-html-widget-tabs #button_tabs-3:checked ~ .hotlist-html-widget-tabs-block #tabs-3,
.hotlist-html-widget-tabs #button_tabs-4:checked ~ .hotlist-html-widget-tabs-block #tabs-4,
.hotlist-html-widget-tabs #button_tabs-5:checked ~ .hotlist-html-widget-tabs-block #tabs-5,
.hotlist-html-widget-tabs #button_tabs-6:checked ~ .hotlist-html-widget-tabs-block #tabs-6,
.hotlist-html-widget-tabs #button_tabs-7:checked ~ .hotlist-html-widget-tabs-block #tabs-7,
.hotlist-html-widget-tabs #button_tabs-8:checked ~ .hotlist-html-widget-tabs-block #tabs-8 {
  display: block;
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.hotlist-html-widget-tabs input[name="button_tab"] {
  display: none;
}

.hotlist-html-widget-tabs input[name="button_tab"] + label {
  cursor: pointer;
  text-decoration: none;
  color: #333;
  flex-grow: 3;
  text-align: center;
  background-color: #f2f2f2;
  user-select: none;
  text-align: center;
  -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  line-height: 45px;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 25px;
  position: relative;
  border: 1px solid transparent;
  margin: 2px 1px 0 0;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e3e3e3;
}

.hotlist-html-widget-tabs input[name="button_tab"]:checked + label:hover {
  border-bottom: 1px solid transparent;
  background-color: #fff;
}

.hotlist-html-widget-tabs input[name="button_tab"] + label:hover {
  background-color: #f9f9f9;
}

.hotlist-html-widget-tabs input[name="button_tab"]:checked + label {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-bottom: 1px solid transparent;
  cursor: default;
  border-radius: 6px 6px 0 0;
}

.hotlist-html-widget-tabs input[name="button_tab"]:checked + label::after,
.hotlist-html-widget-tabs input[name="button_tab"] + label:hover::after,
.hotlist-html-widget-tabs input[name="button_tab"]:checked + label:hover::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px solid #fff;
  position: absolute;
  bottom: -2px;
  z-index: 1;
  left: 0;
}

.hotlist-html-widget-tabs .hotlist-html-widget-tabs-block {
  border-top: 1px solid #e3e3e3;
  margin: -1px auto 20px auto;
  display: block;
}

.hotlist-html-widget-tabs .hotlist-html-widget-tabs-block > div {
  display: none;
  padding: 15px 25px;
  background-color: transparent;
  position: absolute;
  width: calc(100% - 50px);
  opacity: 0;
  left: 0;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

@media (max-width: 600px) {
  .hotlist-html-widget-tabs .hotlist-html-widget-tabs-block > div {
    padding: 15px 10px;
    width: calc(100% - 20px);
  }
}

</style>

Titles

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Title 7

Для использования данного стиля, добавьте код из поля ниже, в редактор дизайна во вкладку CSS стили:

Callback block

Перезвоните нам

+38(099)555-44-22
+38(099)555-44-33

и получите бесплатную консультацию

или
отправьте запрос

Отправить запрос

Phone 1:
Phone 2:
From ID: (Form ID)

Для вставки данного блока, скопируйте код из поля ниже и вставьте на необходимой странице:

<div class="callblock_block_wrap"><div class="callblock_block_inside">
<span class="callblock_block_text_title">Перезвоните нам</span> 
<div align="center"><a class="callblock_block_phone" href="tel:+380995554422" onclick="gtag('event', 'Phone_Call_Click');">+38(099)555-44-22</a><br/>
<a class="callblock_block_phone2" href="tel:+380995554433" onclick="gtag('event', 'Phone_Call_Click');">+38(099)555-44-33</a><br/>
</div>

<span class="callblock_block_text">и получите бесплатную консультацию</span>
<div class="callblock_block_text_send_request">или<br/> отправьте запрос</div>

<div class="callblock_block_button hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="490" data-mobile-width="300"  data-dialog-form_title="Отправить запрос" data-dialog-modify-text="" data-dialog-title="Отправить запрос" data-dialog-whatform="Форма Отправить запрос низ страницы" data-dialog-buttontext="Отправить" data-mobile-width="300">Отправить запрос</div>
	
</div></div>
<style>

@media (min-width: 961px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block.jpg) no-repeat;
 }
}

@media (max-width: 960px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_960.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

@media (max-width: 450px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_410.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

.callblock_block_wrap{ clear:both;
width:100%; 
height:auto; 
background-size: cover;
background-position:center;
border-bottom: 0px solid #dddbd6;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.18);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.18);
margin:5px auto;
}

.callblock_block_inside{ 
display:block;
width:100%; 
margin:0 auto; 
padding:0px; 
overflow:hidden; 
height:auto; 
min-height:400px;
text-align:center;
color: #ffffff;
}

.callblock_block_wrap .callblock_block_text_title{
font-size: 25px;
margin:35px auto 10px;
line-height: 35px;
text-shadow: 1px 1px 1px rgb(27, 27, 27), 1px 1px 12px rgba(0, 0, 0, 1);
display:block; 
}

.callblock_block_wrap .callblock_block_phone{
font-size: 29px;
margin: 75px auto 10px;
line-height: 35px;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
color: #ffffff!important;
text-align:center;
text-decoration:none;
}

.callblock_block_wrap .callblock_block_phone2{
font-size: 29px;
margin: 10px auto 10px;
line-height: 35px;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
color: #ffffff!important;
text-align:center;
text-decoration:none;
}

.callblock_block_wrap .callblock_block_text{  
padding: 9px 0px;
line-height: 30px;  
display:block; 
position: relative; 
margin:0px auto; 
color: #fff;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
font-size:16px;
width:90%;
}

.callblock_block_wrap .callblock_block_text_send_request{ 
line-height: 20px;
display:block;
text-shadow: 1px 2px 1px rgba(0,0,0,1), 1px 1px 10px rgba(0,0,0,1);
font-size:16px;
text-align:center;
width:90%; margin:auto;
color:#fff;
}

.callblock_block_wrap .callblock_block_button{ 
background:#3d627c; 
padding:12px 30px; 
moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
cursor:pointer; 
margin:30px auto 40px; 
text-align: center; 
font-size: 16px;
color:#fff; 
display:inline-block; 
}

.callblock_block_button:hover{ 
background:#ffd800; color:#000;
}

.callblock_block_button:active{ 
top:2px; position:relative; 
}

</style>

@media (min-width: 961px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block.jpg) no-repeat;
 }
}

@media (max-width: 960px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_960.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

@media (max-width: 450px){ 
 .callblock_block_wrap {
 background:url(/templates/html_widgets/call_back_block/call_back_block_410.jpg) no-repeat; 
 background-position: 70%!important;
 }
}

.callblock_block_inside{ 
display:block;
width:100%; 
margin:0 auto; 
padding:0px; 
overflow:hidden; 
height:auto; 
min-height:400px;
text-align:center;
color: #ffffff;
}

.callblock_block_button:hover{ 
background:#ffd800; color:#000;
}

.callblock_block_button:active{ 
top:2px; position:relative; 
}

</style>

Например, вы можете создать Блок/Меню, и расположить его в Footer сайта.
Замените номера телефонов. При использовании только одно номера, удалите строку callblock_block_phone2.
Замените XXX на ID вашей формы, в тексте кнопки: data-dialog-form_id="XXX".

Слайд с Комментариями / Отзывами

Страница и данныеТип страницы:

ID страницы:

- Поиск

Диапазон рейтинга:
Отзывов в блоке: Прокрутка за раз: Предзагрузка:

АдаптивностьАдаптивные breakpoints (JSON):

Автовоспроизведение и навигация Автовоспроизведение:
Задержка автовоспроизведения (мс): По кругу:
Показывать стрелки навигации:
Положение стрелок:
Показывать пагинацию:

Положение звёзд, автора и датыПоказывать картинку: Картинка - ссылка: Позиция: Название товара: Звёзды-ссылка:

Звёзды: зона выравн. приоритет

Автор: зона выравн. приоритет

Дата: зона выравн. приоритет

Для вставки данного блока, скопируйте код из поля ниже и вставьте на необходимой странице:

<link rel="stylesheet" type="text/css" href="/templates/html_widgets/html_widget_reviews/html_widget_reviews.css" />
<script src="/templates/html_widgets/html_widget_reviews/html_widget_reviews.js"></script>

<span class="html_widget_reviews_ajax_load_comments" data-nc="0" data-page-id="26724" data-scpt="page" data-rating="4,5" data-loop="false" data-items="1" data-responsive='{}' data-autoplay="false" data-autoplay-timeout="7000" data-step="1" data-preload="false" data-nav="true" data-nav-position="sides" data-dots="true" data-rating-zone="after" data-author-zone="after" data-date-zone="after" data-rating-align="right" data-author-align="left" data-date-align="left" data-rating-order="3" data-author-order="1" data-date-order="2" data-show-image="false" data-image-link="true" data-image-position="left" data-show-title="false" data-stars-link="false" data-lang="" data-error-msg="Нет отзывов к данной странице"></span>
<div id="html_widget_reviews" class="html_widget_reviews_container" data-rating-zone="after" data-author-zone="after" data-date-zone="after" data-rating-align="right" data-author-align="left" data-date-align="left" data-rating-order="3" data-author-order="1" data-date-order="2">
<div class="html_widget_reviews-track"></div>
<div class="html_widget_reviews-nav-bar">
  <button class="html_widget_reviews-nav-prev" type="button">&lsaquo;</button>
  <button class="html_widget_reviews-nav-next" type="button">&rsaquo;</button>
  <div class="html_widget_reviews-dots"></div>
</div>
</div>

Данный виджет позволяет загружать Комментарии/Отзывы в JSON формате. Тип и ID страницы задается в элементе с классом "html_widget_reviews_ajax_load_comments". Дополнительно можно указать: data-items (отзывов в блоке), data-responsive (JSON с breakpoints, пример {"1000":{"items":2,"navPosition":"sides"},"600":{"items":1}}), data-autoplay, data-autoplay-timeout. Стиль и скрипт Виджета можно изменить, скачав файлы по пути "/templates/html_widgets/html_widget_reviews/".

Кнопка «Добавить отзыв»

Вставку формы для добавления отзыва можно реализовать при помощи скрипта, который реагирует на нажатие элемента с класом "html_widget_reviews_ajax_load_comments_form". Таким образом можно использовать виджет с отзывами на любой странице, а также отображать форму для добавления комментрия при нажатии на элемент. Для активации формы при загрузке страницы, без нажатия на html_widget_reviews_ajax_load_comments_form, можно добавить <script>document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(`.html_widget_reviews_ajax_load_comments_form`).forEach(el => el.click()); });</script>

Offers mosaicПеречень ID товаров:

- Поиск

Название товара 1

Описание товара 1. Описание свойств товара или оффер. Блок с текстом необходимо изменить.

Название товара 2

Описание товара 2. Описание свойств товара или оффер. Блок с текстом необходимо изменить.

Название товара 3

Описание товара 3. Описание свойств товара или оффер. Блок с текстом необходимо изменить.

Для вставки данного блока, скопируйте код из поля ниже и вставьте на необходимой странице:

<style>
.offer-mosaic-flex-block {
  display: flex;
  flex-wrap: wrap;
}
.offer-mosaic-flex-block:nth-child(2n) {
  flex-direction: row-reverse;
}
.offer-mosaic-flex-block .offer-mosaic-flex-block-side {
  width: 50%;
  padding: 1.75rem;
  box-sizing: border-box;
}
.offer-mosaic-flex-block .offer-mosaic-flex-block-side img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.offer-mosaic-flex-block .offer-mosaic-flex-block-side-title {
  font-size: 24px;
  margin: 10px 10px 10px 0px;
  display:block;
}

.offer-mosaic-flex-block .offer-mosaic-flex-block-side p {
  font-size: 16px;
  margin: 10px 0px 10px 0px;
}

.offer-mosaic-flex-block .offer-mosaic-flex-button{
	text-decoration:none;
    line-height: 1.5;
    background-color: transparent;
    color:#000;
    cursor: pointer;
    border-radius: 1.5rem;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    border: 2px solid #4f5050;
    transition: all .3s ease;
    text-align: center;
    margin: 0.5rem 1rem 0.5rem 0;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
}
.offer-mosaic-flex-block .offer-mosaic-flex-button:hover{
 background-color:#4f5050;
 color:#fff;
}
.offer-mosaic-flex-block .offer-mosaic-flex-button:active{transform: translateY(1px);}
	
@media (max-width: 600px) {
  .offer-mosaic-flex-block .offer-mosaic-flex-block-side {
    width: 100%;
  }
  .offer-mosaic-flex-block .offer-mosaic-flex-block:nth-child(2n) {
  flex-direction:column;
  }
}
</style>

<div class="offer-mosaic-flex">
  
  <div class="offer-mosaic-flex-block">
  
  <div class="offer-mosaic-flex-block-side">
    <div class="offer-mosaic-flex-block-side-title">Название товара 1</div>
    <p>Описание товара 1. Описание свойств товара или оффер. Блок с текстом необходимо изменить. </p>
    <a class="offer-mosaic-flex-button" href="#">Показать больше</a>
  </div>
    
  
  <div class="offer-mosaic-flex-block-side">
    <img src="/upload/shop_catalog/s15992/483286/483286_0.jpg">
  </div>
    
  </div>
  
	
    
  <div class="offer-mosaic-flex-block">
  
  <div class="offer-mosaic-flex-block-side">
    <div class="offer-mosaic-flex-block-side-title">Название товара 2</div>
    <p>Описание товара 2. Описание свойств товара или оффер. Блок с текстом необходимо изменить. </p>
    <a class="offer-mosaic-flex-button" href="#">Показать больше</a>
  </div>
    
  
  <div class="offer-mosaic-flex-block-side">
    <img src="/upload/shop_catalog/s15992/483342/483342_0.webp">
  </div>
    
  </div>
  
	
  
  <div class="offer-mosaic-flex-block">
  
  <div class="offer-mosaic-flex-block-side">
    <div class="offer-mosaic-flex-block-side-title">Название товара 3</div>
    <p>Описание товара 3. Описание свойств товара или оффер. Блок с текстом необходимо изменить. </p>
    <a class="offer-mosaic-flex-button" href="#">Показать больше</a>
  </div>
    
  
  <div class="offer-mosaic-flex-block-side">
    <img src="/upload/shop_catalog/s15992/483283/483283_0.webp">
  </div>
    
  </div>
  
</div>

Данный способ требует ручного выбора товаров для отображения. Если вы хотите автоматически и быстро создать похожий список товаров, используйте «Виджет с товарами» и установите параметр «Разделить блок на две части».
Эффект мозаики при этом создается с помощью CSS-стиля
«.hotengine-shop-products-mosaic-sides .hotengine-shop-product-list-block:nth-child(even) { flex-direction: row-reverse; }».

Google Reviews
Этот модуль позволяет добавить сайт отзывы о вашей компании.

Для использования виджета необходимо настроить Google «Api Key» и «PlaceID». Это можно сделать в разделе «Настройки», во вкладке «Комментарии и социальные плагины», в разделе «Google Reviews».

Для вставки данного блока, скопируйте код из поля ниже и вставьте на необходимой странице:

<link rel="stylesheet" href="/templates/styles/api_google_place_reviews_widget/css_api_google_place_reviews_widget_flex.css">
<script src="/templates/scripts/hotengine-api-google-place-reviews-widget.js" type="text/javascript" charset="UTF-8"></script>

<div class="google-place-business-info">
    <h3 class="google-place-business-info-title"></h3>
    <div class="google-place-business-info-rating">
        <span class="google-place-business-info-rating-stars"></span>
        <span class="google-place-business-info-rating-number"></span>
        <div class="google-place-business-info-review-count"></div>
    </div>
    <div class="google-place-business-info-address"></div>
    <div class="google-place-business-info-powered-by">powered by Google</div>
    <div class="google-place-business-info-read-more"><a href="#" target="_blank">Read more</a>
    </div> 
</div>

<div id="google-place-reviews-pagination">
    <button id="google-place-reviews-prev-page">&lsaquo;</button>
    <button id="google-place-reviews-next-page">&rsaquo;</button>
</div>
</div>

Google Reviews demo

Google Reviews + Owl Carousel

Google Reviews + Owl Carousel demo

Google Reviews + Owl Carousel demo + Auto Responsive

Googe Places Manual

Дополнительные атрибуты

Атрибуты указываются в HTML коде блока «#google-place-reviews», например «data-reviews-per-page="5" data-min-rating="3" data-reviews_sort="newest" data-orderby="date_desc" data-orderby2="id_asc"».

data-reviews-per-page — количество отзывов, отображаемых на одной странице.
Пример: data-reviews-per-page="10" (покажет 10 отзывов на странице).
data-min-rating — минимальный рейтинг (от 1 до 5), который должен иметь отзыв, чтобы отображаться.
Пример: data-min-rating="4" (будут показаны только отзывы с рейтингом 4 и выше).
data-reviews_sort — сортировка отзывов, запрашиваемых из Google.
Возможные значения:
- newest — показывает самые новые отзывы.
- most_relevant — показывает наиболее релевантные отзывы (по мнению Google).
Пример: data-reviews_sort="newest" (загружает новейшие отзывы).
data-orderby — сортировка отзывов, загружаемых из базы.
Возможные значения:
- rating_asc — рейтинг по возрастанию.
- rating_desc — рейтинг по убыванию.
- date_asc — дата по возрастанию (старые первыми).
- date_desc — дата по убыванию (новые первыми).
- id_asc — ID по возрастанию.
- id_desc — ID по убыванию.
Пример: data-orderby="date_desc" (сортировка по дате, новые отзывы первыми).
data-orderby2 — вторичная сортировка (значения data-orderby и data-orderby2 совпадают).
Используется аналогично data-orderby.
Пример: data-orderby="date_desc" data-orderby2="id_asc" (сортировка сначала по дате, затем по ID).

SpoilerСпойлер — это элемент страницы или текста, который изначально скрывает часть информации и раскрывается по клику. Мы реализовали Spoler при помощи CSS, т.е. без использования дополнительных скриптов.

Показать / Скрыть

Скрытый текст: BooStore.pro — это платформа для создания и управления сайтами и интернет-магазинами.

Встроенный по умолчанию стиль спойлера

Code: CSS

/*default spoiler css */
details.spoiler summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.2em;
  cursor: pointer;
}
details.spoiler summary::-webkit-details-marker {
  display: none; 
}
details.spoiler.spoiler-icon summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
details.spoiler.spoiler-icon summary::after {
  content: "\25B6"; 
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}
details.spoiler.spoiler-icon[open] summary::after {
  content: "\25BC"; 
}
/*STYLE FORM END */

Для вставки данного блока, скопируйте код из поля ниже и вставьте на необходимой странице: