Размещение категорий и подкатегорий в меню аккордеона

Question

Пытаюсь поместить категории в базе в меню аккордеона. Я могу создавать основные категории, но я не могу создавать подкатегории и категории ниже.

table:
hb_id      - catid         - title 
1              0             categories1
2              0             categories2
3              2             subcategories
4              3             sub_subcategories
5              4             sub_sub_subcategories
bla, bla..

стиль многоуровневого аккордеонного меню

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

ol, ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

body {
  font: 100% "roboto", "Trebuchet MS", sans-serif;
  background-color:#EF476F;
}

a { text-decoration: none; }

/**
 * Styling top level items
 */

.nav a, .nav label {
  display: block;
 padding: .85rem;
  color: #fff;
  background-color: #151515;
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(255, 255, 255, 0.5);
  background: #030303;
}

.nav label { cursor: pointer; }

/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
  padding-left: 2rem;
  background: #252525;
  box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; }

/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 4rem;
  background: #353535;
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }

/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }

/**
 * Rotating chevron icon
 */

label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

многоуровневый меню аккордеона HTML

<nav class="nav" role="navigation">
    <ul class="nav__list">
      <li>
        <input id="group-1" type="checkbox" hidden />
        <label for="group-1"><span class="fa fa-angle-right"></span> First level</label>
        <ul class="group-list">
          <li><a href="#">1st level item</a></li>
          <li>
            <input id="sub-group-1" type="checkbox" hidden />
            <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label>
            <ul class="sub-group-list">
              <li><a href="#">2nd level nav item</a></li>
              <li><a href="#">2nd level nav item</a></li>
              <li><a href="#">2nd level nav item</a></li>
              <li>
                <input id="sub-sub-group-1" type="checkbox" hidden />
                <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
                <ul class="sub-sub-group-list">
                  <li><a href="#">3rd level nav item</a></li>
                  <li><a href="#">3rd level nav item</a></li>
                  <li><a href="#">3rd level nav item</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</nav>

многоуровневое меню аккордеона Php

$sql =  $db->query("SELECT * FROM `categories` ORDER BY catid, hb_id");
if($sql)
{
    foreach($sql  as $result)
    {
        $category['categories'][$result['hb_id']] = $result; 
        $category['parent_cats'][$result['catid']][] = $result['hb_id']; 
    }
}
function getCategories($parent, $category) 
{
    $html = "";
    if (isset($category['parent_cats'][$parent]))
    {
        $i=0;
        $html .= '<ul class="nav__list">';
        foreach ($category['parent_cats'][$parent] as $cat_id)
        { $i++;
            if (!isset($category['parent_cats'][$cat_id]))
            {
              $html .= '<li>';
              $html .= '<input id="group-'.$i.'" type="checkbox" hidden />';
              $html .= '<label for="group-'.$i.'"><span class="fa fa-angle-right"></span> '.$category['categories'][$cat_id]['title'].'</label>';
              $html .= '</li>';
            }
            if (isset($category['parent_cats'][$cat_id]))
            {
              $html .= "<li>". $category['categories'][$cat_id]['title'] . " \n";
              $html .= getCategories($cat_id, $category);
              $html .= "</li> \n";
            }
        }
        $html .= "</ul> \n";
    }
    return $html;
}

<nav class="nav" role="navigation">
    <?php echo  getCategories(0, $category); ?>
</nav>

Я пытаюсь получить изображение именно так, но я не мог: https://prnt.sc/scalyp Я не мог открыть подкатегории и подкатегории ниже как аккордеоны