/ Сайтостроение / Дизайн / Раскрывающийся блок

Раскрывающийся блок

18.06.2015

589

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

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

Скрипт

<script>
$(document).ready(function(){
$("#clickMe").click(function() {

$("#picframe"). slideToggle("slow");
});
});
</script>

Верстка

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

Раскрывающийся каталог 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>

Вот так это выглядит на примере:

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Раскрывающийся блок Раскрывающийся блок
Интеграция Яндекс.Кассы
Рекомендации для васИнтеграция Яндекс.КассыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.