Аккордеон-новости

Файл default.php

1. Создаем копию файла default.php и переименовываем в accordion.php
2. Поместить код модуля в контейнеры с css-классами Bootstrap
3. Создать уникальные индексы для вкладок аккордеона
4. Создать класс ' in' для активной вкладки

<?php
defined('_JEXEC') or die;
$idMod = 'accrd'.$module->id;
?>
<div class="accordion" id="<?php echo $idMod; ?>">
<?php for ($i = 0, $n = count($list); $i < $n; $i ++) :
   $item = $list[$i];
   //Создание уникального индекса для вкладок
   //Создание активной вкладки 
   $articleId = $item->alias.$item->id;
   $collapseId = $idMod.'-a'.$i;
   $activecollapse = ''; 
   if ($i == 0) {
     $activecollapse = ' in';
   }
?>
   //Файл _item.php после редактирования будет сохранен как _item_accordion.php
   <div class="accordion-group">
     <?php require JModuleHelper::getLayoutPath('mod_articles_news', '_item-accordion'); ?>
   </div>
<?php endfor; ?>
</div>

Файл _item.php

1. Создаем копию файла _item.php и переименовываем в _item-accordion.php
2. Создаем контейнер accordion-heading для вывода заголовка материала во вкладке
3. Поместить код вывода материала в контейнеры с соответствующими css-классами Bootstrap

<?php
defined('_JEXEC') or die;
$images = json_decode($item->images);
?>
<div class="accordion-heading">
   <a class="accordion-toggle" data-toggle="collapse"
       data-parent="#<?php echo $idMod; ?>"
       href="#<?php echo $collapseId; ?>">
          <?php echo $item->title;?>
   </a>
</div>
<div id="<?php echo $collapseId; ?>" class="accordion-body collapse<?php echo $activecollapse; ?>">
 <div class="accordion-inner">
   <!-- выводим дату -->
   <!-- выводим изображение -->
   <!-- выводим вступительный текст материала -->
   <!-- выводим конпку Подробнее -->
 </div>
</div>

Скачкть файлы примера: accordion.zip