Як у WordPress зробити спойлер або появу блоку при натисканні
Привіт:) У цьому пості покажу, як я у WordPress реалізував окремий блок на сторінці з можливістю ховати та показувати частину контенту по кнопці. Також додав можливість редагувати вміст блоку за допомогою зручного візуального редактора.
У коді файла ВордПрес-шаблона блок має HTML-розмітку
<div class="read-more-block">
<div class="service-container">
<input type="checkbox" class="read-more-block__checker" id="read-more-block__checker" />
<div class="read-more-block__limiter">
<?php echo get_field( 'read_more_block_repair_of_dishwashers_en' ); ?>
<div class="limiter--bottom"></div>
</div><!-- /.read-more-block__limiter -->
<label for="read-more-block__checker" class="read-more-block__button"></label>
</div><!-- /.service-container -->
</div><!-- /.read-more-block -->
Тут рядок
<?php echo get_field( 'read_more_block_repair_of_dishwashers_en' ); ?>
містить функцію get_filed() із плагіну ACF. Вона запитує значення мета-поля. За допомогою плагіну ACF було створене поле типу "Візуальний редактор":
У редакторі WordPress заповнення цього поля виглядає так:
Також додав декілька CSS-правил:
/* ----------------------------------------- */
/* ---- Read More Block -------------------- */
/* ----------------------------------------- */
.read-more-block {
margin-bottom: 150px;
}
@media (max-width: 999.98px) {
.read-more-block {
margin-bottom: 60px;
}
}
.read-more-block h2,
.read-more-block h3,
.read-more-block h4,
.read-more-block h5,
.read-more-block h6,
.read-more-block p,
.read-more-block a,
.read-more-block span {
margin-bottom: 20px;
font-family: Montserrat, sans-serif;
}
.read-more-block__limiter {
max-height: 100px;
overflow: hidden;
position: relative;
}
.read-more-block__limiter .limiter--bottom {
position: absolute;
bottom: 0;
/* background: linear-gradient(to bottom, rgb(255 217 29 / 0%), rgb(255 217 29 / 90%)); */
width: 100%;
height: 50px;
opacity: 1;
transition: 0.3s;
}
.read-more-block__checker {
opacity: 0;
position: absolute;
}
.read-more-block__checker:checked ~ .read-more-block__limiter {
max-height: none;
}
.read-more-block__checker:checked ~ .read-more-block__limiter .limiter--bottom {
opacity: 0;
transition: 0.3s;
}
.read-more-block__checker ~ .read-more-block__button:before {
/* content: "\2186"; */
/* content: "\21A1"; */
/* content: "\21CA"; */
content: "\25BC";
font-size: 25px;
}
.read-more-block__checker:checked ~ .read-more-block__button:before {
content: "\25B2";
}
.read-more-block__button {
cursor: pointer;
display: block;
text-align: center;
color: #777;
}
На сайті блок з можливістю сховати/показати контент по кнопці виглядає так:
Приклад роботи блоку — https://kyiv-service.com.ua/remont-pralnikh-mashin/.