Создать вкладки (tabs) из свойств элемента инфоблока

Как создать вкладки из свойств элементов инфоблока компонента «Новости» в Битрикс?

Решение:
Для начала необходимо скачать файл со скриптом для работы вкладок https://github.com/jellekralt/Responsive-Tabs, установить jQuery. Разместить компонент «Новости» на странице сайта и скопировать его в свой шаблон для дальнейшего редактирования.

В шаблоне компонента, вывести созданные вами свойства инфоблока, которые будут названиями этих вкладок:
<ul>
	<?foreach($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>		
		<?if($pid == "analytics" && "!PROPERTY_ANALYTICS"):?> <li>
			<a href="#tab-1"><?=$arProperty["NAME"];?></a> </li> 
		<?elseif ($pid == "design" && "!PROPERTY_DESIGN"):?> <li>
			<a href="#tab-2"><?=$arProperty["NAME"];?></a> </li> 
		<?elseif ($pid == "programming" && "!PROPERTY_PROGRAMMING"):?> 
			<li><a href="#tab-3"><?=$arProperty["NAME"];?></a> </li> 
		<?elseif ($pid == "testing" && "!PROPERTY_TESTING"):?>
			<li><a href="#tab-4"><?=$arProperty["NAME"];?></a> </li> 
		<?elseif ($pid == "testing" && "!PROPERTY_TESTING"):?><li>
			<a href="#tab-4"><?=$arProperty["NAME"];?></a> </li> 
		<?elseif ($pid == "support" && "!PROPERTY_SUPPORT"):?><li>
			<a href="#tab-4"><?=$arProperty["NAME"];?></a></li>
		<?endif;?>
	<?endforeach;?>
</ul>
Ниже добавить вывод значений из этих же свойств:
<?foreach($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
	<?if($pid == "analytics" && "!PROPERTY_ANALYTICS"):?>
		<div id="tab-1">
  			<?=$arProperty["DISPLAY_VALUE"];?>	
		</div>
	<?elseif ($pid == "design" && "!PROPERTY_DESIGN"):?>
		<div id="tab-2">
			<?=$arProperty["DISPLAY_VALUE"];?>	
		</div>	
	<?elseif ($pid == "programming" && "!PROPERTY_PROGRAMMING"):?>
		<div id="tab-3">		
			<?=$arProperty["DISPLAY_VALUE"];?>
		</div>
	<?elseif ($pid == "testing" && "!PROPERTY_TESTING"):?>
		<div id="tab-4">
			<?=$arProperty["DISPLAY_VALUE"];?>
		</div>
	<?elseif ($pid == "support" && "!PROPERTY_SUPPORT"):?>
		<div id="tab-4">	
			<?=$arProperty["DISPLAY_VALUE"];?>
		</div>
	<?endif;?>
<?endforeach;?>
И подключить скрипт с названием блока (у меня #portfolio-tabs), в котором лежат данные:
$('#portfolio-tabs').responsiveTabs({
	startCollapsed: 'accordion'
});

18.05.2017

Есть вопросы?

Если у вас возникли вопросы по настройке какого-либо функционала CMS «Битрикс» или нужна техническая поддержка вашего сайта, то пишите мне:


Рекомендую почитать :

Получить название свойства из типа Справочник
Выводим название элемента из свойства в компоненте "Новости" Решение: У каждого элемента инфоблока создано свойство типа «Справочник» («METKA_...
Вывод текущего года на PHP
Как вывести текущий год или период от ... года до ...? Решение: Часто, при создании сайтов в footer выводится "текущий год" или "год создания...
Сортировка товаров в каталоге Битрикса на Ajax
Как сортировать товары каталога по цене, названию, новинкам без перезагрузки страницы? Решение: У комплексного компонента bitrix:catalog в наст...
Уведомление о cookies на сайт
Добавляем уведомление о cookies от Яндекса на сайт Решение: Подключаем библиотеку js-cookie для работы с cookie: <script type="text/jav...
Отзывы к товарам в Битрикс
Как самостоятельно добавить отзывы к товарам каталога используя готовый модуль и API Битрикс. Решение: Самый простой способ добавить отзывы к ...
ReferenceError: Can't find variable: JCCatalogElement
Исправление ошибки в Safari "В карточке товара JCCatalogElement не найден".  Решение: Данная проблема может возникнуть в файле /bitrix...