Раскрывающийся блок (спойлер), нужен для скрытия части информации при просмотре, с возможностью отображения при необходимости.

Раскрывающийся блок, единичный

Скрипт

$(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;}

Скрипт

$(".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("Развернуть характеристики");
	}
});

Поделиться в соц. сетях: