Чанк выбора:

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