Табы из свойств инфоблока в Битрикс

 <!--СКРИПТЫ ВКЛАДОК В СТАТЬЯХ-->  <!-- jQuery Plugin scripts -->
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/external/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/external/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>

<!-- Slider Kit launch -->
<script type="text/javascript">
$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility

// Tabs > Standard
$(".tabs-standard").sliderkit({
auto:false,
tabs:true,
mousewheel:true,
circular:true,
panelfx:"none"
});
// Tabs > No height
$(".tabs-noheight").sliderkit({
auto:false,
tabs:true,
freeheight:true,
circular:true
});
// Tabs > Imbricated
$(".tabs-imbricate").sliderkit({
cssprefix:"customtabs",
auto:false,
tabs:true
});
// Carousel > Demo #2
$(".carousel-demo2").sliderkit({
auto:false,
shownavitems:4,
scroll:1,
mousewheel:true,
circular:true
});
// Pagination
$(".pagination-basic").sliderkit({
auto:false,
tabs:true,
freeheight:true
});

// Button : Make the standard tabs menu slide
var myStandardTabs = $(".tabs-standard").data("sliderkit");
$("#tabs-standard-slide").click(
function(){
// Applies only once
if($(".sliderkit-panels-wrapper",myStandardTabs.domObj).size() == 0){
// Set the transition effect to "sliding"
myStandardTabs.options.panelfx = "sliding";
// The sliding effect requires a wrapper around the panels
myStandardTabs._wrapPanels();
}

// Stops the click
return false;
}
);
});
</script>

<?foreach($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>

<?=$arProperty["NAME"]?>:&nbsp;
<?if(is_array($arProperty["DISPLAY_VALUE"])):?>
<?=implode("&nbsp;/&nbsp;", $arProperty["DISPLAY_VALUE"]);?>
<?else:?>
<?=$arProperty["DISPLAY_VALUE"];?>
<?endif?>
<br />
<?endforeach;?>

<!-- Начало табов из свойств -->
<div class="sliderkit tabs-standard">

<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>
/*Выводим названия свойств, они будут вкладками*/
<?foreach ($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
<li><a href="tabs.html#" title="[link title]"><?=$arProperty["NAME"]?></a></li>
<?endforeach;?>
</ul>
</div>
</div>


<div class="sliderkit-panels">
/*Выводим содержимое свойств, это будет телом таба соответсвующего вкладке*/
<?foreach ($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
<div class="sliderkit-panel">
<div class="sliderkit-news">
<?if(is_array($arProperty["DISPLAY_VALUE"])):?>
<?=implode("&nbsp;/&nbsp;", $arProperty["DISPLAY_VALUE"]);?>
<?else:?>
<?=$arProperty["DISPLAY_VALUE"];?>
<?endif?>
</div>
</div>
<?endforeach;?>
</div>
</div>
<!-- Конец табов из свойств -->

/* Обнуления списка вкладок */
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;}
.sliderkit .sliderkit-nav-clip ul li{float:left;}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}

.tabs-standard{width:100%;}

/* Навигация по вкладкам */
.tabs-standard .sliderkit-nav{position:relative;width:100%;height:27px;text-align:left;}
.tabs-standard .sliderkit-nav-clip{margin:0;}
.tabs-standard .sliderkit-nav-clip li{height:27px;padding:0px;margin:0 2px 0 0;}

.tabs-standard .sliderkit-nav-clip li,
.tabs-standard .sliderkit-nav-clip li a
{float:left; margin-left:10px; position:relative; z-index:40;}

.tabs-standard .sliderkit-nav-clip li a
{height:18px;margin:0;padding:6px 15px; font-size:13px;
color:#346699;text-transform:uppercase;
text-decoration:none;}

.tabs-standard .sliderkit-nav-clip li.sliderkit-selected
{position:relative; z-index:35;
background:#fff; border:1px solid #ccc; border-bottom:none;
border-top-left-radius:4px;border-top-right-radius:4px;}

.tabs-standard .sliderkit-nav-clip li.sliderkit-selected a
{color:#ff6005;height:17px;}

/* Панели вкладок */
.tabs-standard .sliderkit-panels
{width:97%;overflow:hidden;padding:10px;
border:1px solid #ccc;background:#fff;
border-radius:4px;}

.tabs-standard .sliderkit-panel{width:97%;background:#fff;}

<div class="tabs_it">
<!-- Начало табов из свойств -->
<div class="sliderkit tabs-standard">

<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>

<? if ($arResult["DISPLAY_PROPERTIES"]['MORE_PHOTO']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['MORE_PHOTO']['NAME']?>
</a></li>
<?}?>

<? if ($arResult["DISPLAY_PROPERTIES"]['код_свойства-1']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['код_свойства-1']['NAME']?>
</a></li>
<?}?>


<? if ($arResult["DISPLAY_PROPERTIES"]['код_свойства-2']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['код_свойства-2']['NAME']?>
</a></li>
<?}?>

<? if ($arResult["DISPLAY_PROPERTIES"]['код_свойства-3']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['код_свойства-3']['NAME']?>
</a></li>
<?}?>

</ul>
</div>
</div>

<div class="sliderkit-panels">

<div class="sliderkit-panel">
<div class="sliderkit-news">


<?
$LINE_ELEMENT_COUNT = 2;
if(count($arResult["MORE_PHOTO"])>0):?>
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
<? $file = CFile::ResizeImageGet($PHOTO, array('width'=>220, 'height'=>'150'), BX_RESIZE_IMAGE_EXACT, true); ?>

<div class="photo_tabit"> // Здесь мы вывели фотографии (свойство файл изображение) с кодом MORE_PHOTO не забудте вписать в result_modifier.php

<a href="<?=$PHOTO["SRC"]?>" name="more_photo" class='highslide' onclick="return hs.expand(this)" alt="<?=(strlen($PHOTO["DESCRIPTION"]) > 0 ? $PHOTO["DESCRIPTION"] : $arResult["NAME"])?>">
<img border="0" src="<?=$file["src"]?>" width="<?=$file["width"]?>" height="<?=$file["height"]?>"
alt="<?=(strlen($PHOTO["DESCRIPTION"]) > 0 ? $PHOTO["DESCRIPTION"] : $arResult["NAME"])?>"/>
</a>
</div>
<?endforeach?>
<?endif?>

</div>
</div>


<div class="sliderkit-panel"> // дальше простые свойства типа HTML/текст
<div class="sliderkit-news">
<?echo $arResult['DISPLAY_PROPERTIES']['код_свойства-1']['DISPLAY_VALUE'];?>
</div>
</div>

<div class="sliderkit-panel">
<div class="sliderkit-news">
<?echo $arResult['DISPLAY_PROPERTIES']['код_свойства-2']['DISPLAY_VALUE'];?>
</div>
</div>

<div class="sliderkit-panel">
<div class="sliderkit-news">
<?echo $arResult['DISPLAY_PROPERTIES']['код_свойства-3']['DISPLAY_VALUE'];?>
</div>
</div>

</div>
</div>
<!-- Конец табов из свойств -->
</div>