Как сделать сворачивание с помощью bootstrap (collapse.js)?

Question

[Алексей Карпань]

Функция выводит вот такую иерархию:

Array
(
[1] => Array
(
[0] => Категория1
[next] => Array
(
[16] => Подкатегория16
[19] => Подкатегория19
)

)

[2] => Array
(
[0] => Категория2
[next] => Array
(
[23] => Подкатегория23
[24] => Подкатегория24
[26] => Подкатегория26
[27] => Подкатегория27
)

)

[3] => Array
(
[0] => Категория3
[next] => Array
(
[29] => Подкатегория29
[30] => Подкатегория30
[31] => Подкатегория31
)

)

Для вывода в цикле используется вот такой код:

<? if(is_array($categories)):?>
				<? foreach($categories as $key=>$value):?>
					<? if($value['next']):?>
						<div style="margin-top:20px;">
							<div style="color:#d35400;font-size:18px"><strong><?=$value[0];?></strong></div>
							<? foreach($value['next'] as $k=>$v):?>
								<div style="padding-left:10px">&bull; <a href="?action=categories&id_cat=<?=$k?>" style="font-size:14px; color:#34495e"><?=$v;?></a></div>
							<? endforeach;?>
						</div>			
					<? endif;?>
				<? endforeach;?>
			<? endif;?>

Как мне задействовать bootsrap'овский collapse в данному случае, чтобы подкатегории прятались в категории ( как в документации bootstrap-3.ru/javascript.php#collapse)?

Answer 1

[Алексей Зуев]

1. Подключаете bootstrap
2. Формируете разметку, аналогичную документации для collapse.

Основная задача- правильно сформировать id для сворачиваемого контента.
У меня работает следующий код

<?php 
    $categories = [
        [
          "Категория1",
          "next" => [
            16 => "Подкатегория16",
            19 => "Подкатегория19"

          ]
        ],
        [
          "Категория2",
          "next" => [
            23 => "Подкатегория23",
            24 => "Подкатегория24",
            26 => "Подкатегория26",
            27 => "Подкатегория27"
          ]
        ],
        [
          "Категория3",
          "next" => [
            29 => "Подкатегория29",
            30 => "Подкатегория30",
            31 => "Подкатегория31"
          ]
        ]
    ];
  ?>
  <div class="container">
    <h1>Как мне задействовать bootsrap'овский collapse</h1>
    <? if(is_array($categories)):?>
      <div class="panel-group" id="accordion">
        <? foreach($categories as $key=>$value):?>
          <div class="panel panel-default">
            <? if($value['next']):?>
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#categoryCollapse<?=$key?>">
                    <?=$value[0];?>
                  </a>
                </h4>
              </div>
              <div id="categoryCollapse<?=$key?>" class="panel-collapse collapse<?=$key==0?" in":""?>">
                <div class="panel-body">
                  <? foreach($value['next'] as $k=>$v):?>
                    <div style="padding-left:10px">&bull; <a href="?action=categories&id_cat=<?=$k?>" style="font-size:14px; color:#34495e"><?=$v;?></a></div>
                  <? endforeach;?>
                </div>
              </div>
            <? endif;?>
          </div>
        <? endforeach;?>
      </div>
    <? endif;?>
  </div>

На выходе получаем работающий пример

Answer 2

[Алексей Карпань]

Отлично спасибо