Отображение блока по клику на превью
Чанк выбора:
<div class="container" id="complex">
<div class="row text-center">
<h1>[[pdoField?&id=`17`&field=`pagetitle`]]</h1>
<hr style="width:50%;">
<h4>[[pdoField?&id=`17`&field=`longtitle`]]</h4>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
[[pdoMenu?
&parents=`17`
&level=`1`
&limit=`0`
&tplOuter=`@INLINE <div class="complex" [[+classes]]>[[+wrapper]]</div>`
&rowClass=`col-lg-2 col-md-3 col-xs-3`
&tpl=`@INLINE <div [[+classes]]><a href="[[+link]]#complex" [[+attributes]]><div>[[+menutitle]]</div></a>[[+wrapper]]</div>`
]]
</div>
</div>
<div class="row content">
<div class="col-lg-12 col-md-12 col-xs-12">
[[pdoResources?
&parents=`[[*id:is=`1`:then=`18`:else=`[[*id]]`]]`
&includeContent=`1`
&includeTVs=`image,price`
&tplFirst=`complexes_variant_first.tpl`
&tpl=`complexes_variant.tpl`
]]
<div id="order">
<button type="submit" class="btn btn-calc" data-toggle="modal" data-target="#modal-order">Закажите подробный расчет стоимости</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<ul class="variants list-unstyled">
[[pdoResources?
&parents=`[[*id:is=`1`:then=`18`:else=`[[*id]]`]]`
&tpl=`@INLINE <li class="caption" data-id="cap_[[+idx]]"><a>[[+pagetitle]]</a></li>`
]]
</ul>
</div>
</div>
</div>
complexes_variant.tpl
<div class="hide_block" id="cap_[[+idx]]" style="display:none;">
<div class="col-lg-4">
<img class="img-responsive" src="[[+tv.image]]" alt="">
</div>
<div class="col-lg-8">
<h3>[[+pagetitle]]</h3>
[[+content]]
</div>
</div>
complexes_variant_first.tpl
<div class="hide_block" id="cap_[[+idx]]">
<div class="col-lg-4">
<img class="img-responsive" src="[[+tv.image]]" alt="">
</div>
<div class="col-lg-8">
<h3>[[+pagetitle]]</h3>
[[+content]]
</div>
</div>
$('.caption').click(function (){
trigger = $(this).data('id');
$('.hide_block').each(function (){
$(this).css('display', 'none');
$('.caption').removeClass('select');
})
$('#'+trigger).fadeIn(); // fadeIn - плавное появление
$(this).addClass('select');
})
Класс
.select a{
background-color: #FF4900;
}