Тільки користувачам дозволено входити в центр адміністрування. Увійти

Віджети 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Спойлер — це елемент сторінки або тексту, який спочатку приховує частину інформації та розкривається після кліку. Ми реалізували спойлер за допомогою 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 */

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