Раскрывающийся блок (спойлер), нужен для скрытия части информации при просмотре, с возможностью отображения при необходимости.
Раскрывающийся блок, единичный
Скрипт
$(document).ready(function(){
$("#clickMe").click(function() {
$("#picframe"). slideToggle("slow");
});
});
Верстка
Наши работы
Галерея изображений
<div align="center" id="clickMe">Наши работы</div>
<div id="picframe">Галерея изображений</div>
CSS
/*Раскрывающийся блок*/
#clickMe {
background-color: #9be300;
text-align: center;
width: 100%;
padding: 2% 0;
font-weight: bold;
cursor: pointer;
float: left;
}
#picframe {
padding: 2% 0;
width: 100%;
display: none;
float: left;
background-color: #ccc;
text-align: center;
}
Решение не правильное — нет возможности сделать несколько раскрывающихся блоков
Раскрывающийся блок, множественный
Скрипт
$(document).ready(function() {
// Раскрывающийся блок
$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
$(this).next().slideToggle();
});
});
Верстка
<div class="spoiler-title">То что видно (нажать)</div>
<div class="spoiler-body">То что скрыто</div>
CSS
/*Раскрывающийся блок*/
.spoiler-title {
background-color: #cdf180;
text-align: left;
width: 100%;
padding: 15px 30px;
margin-top: 10px;
box-sizing: border-box;
font-weight: bold;
cursor: pointer;
float: left;
}
.spoiler-body {
padding: 15px 30px;
box-sizing: border-box;
width: 100%;
display: none;
float: left;
background-color: whitesmoke;
text-align: left;
}
Можно сделать чтобы при раскрытии одного другие скрывались, по типу аккордеона:
jQuery(document).ready(function($){
$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
$('.spoiler-body').hide('slow');
$(this).next().slideToggle();
});
});
Раскрывающийся каталог WC
Когда категорий товаров много, мы можем показать лишь часть из них (наиболее востребованные), а остальные скрыть под спойлером ВЕСЬ КАТАЛОГ.
<h2>Каталог товаров</h2>
<div id="product-category-archive">
<?php $terms = get_terms( array(
'taxonomy' => 'product_cat',
'number' => 8,
'hide_empty' => true,
'orderby' => 'name',
'parent' => 0
) ); ?>
<?php if($terms) : ?>
<?php foreach($terms as $term) : ?>
<div class="subcategory">
<a class="subcategory-image" href="<?php echo get_term_link($term->term_id);?>"><?php woocommerce_subcategory_thumbnail( $term ); ?></a>
<h2 class="subcategory-title"><a href="<?php echo get_term_link($term->term_id);?>"><?php echo $term->name;?></a></h2>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<div class="spoiler-title">Все категории</div>
<div class="spoiler-body">
<div id="product-category-archive">
<?php $terms = get_terms( array(
'taxonomy' => 'product_cat',
'parent' => 0,
'offset' => 8,
'number' => 50,
'hide_empty' => true,
'orderby' => 'name',
) ); ?>
<?php if($terms) : ?>
<?php foreach($terms as $term) : ?>
<div class="subcategory">
<a class="subcategory-image" href="<?php echo get_term_link($term->term_id);?>"><?php woocommerce_subcategory_thumbnail( $term ); ?></a>
<h2 class="subcategory-title"><a href="<?php echo get_term_link($term->term_id);?>"><?php echo $term->name;?></a></h2>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
Вот так это выглядит на примере:
Спойлер с fade
Должно получиться примерно так:
Верстка
<div class="cus_attr">
<?php do_action( 'woocommerce_product_additional_information', $product ); ?>
<p class="cus_attr_title"><span class="cus_attr_but">Развернуть характеристики</span></p>
</div>
CSS
.cus_attr_title {
position: absolute;
z-index: 999;
bottom: 0;
cursor: pointer;
transition: 0.3s;
left: 25%;
}
.cus_attr {max-height: 200px; overflow: hidden; position: relative;}
.cus_attr:before {
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #fff);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0), #fff);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
position: absolute;
z-index: 99;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.3s ease;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s ease 0s;
}
.cus_attr.full {max-height: 100%;}
.cus_attr.full:before {opacity: 0;}
Сделать чтобы блок разворачивался плавно. На height и max-height при 100% и auto transition не действует.
Скрипт
$(".cus_attr_but").click(function(){
$(".slideT").toggleClass("full");
$(this).toggleClass("active");
if ($(".cus_attr_but").hasClass("active")){
$(".cus_attr_but").text("Свернуть характеристики");
} else {
$(".cus_attr_but").text("Развернуть характеристики");
}
});
[site-socialshare]