How can I add "collapse" to subcategory titles?

[emsanator]

Hi, I'm trying to create a theme-compatible category system, but I missed some points.

For example;

category_name_women_clothing and category_name_women_bag, etc.. are supposed to be collapsible, but I was not successful in this.

How can I make a model that opens and closes sub-categories, where am I missing?

This is what it looks like right now - Image

PHP Code:

function createTree($array, $currentParent, $currLevel = 0, $prevLevel = -1)
    {

        foreach ($array as $categoryId => $category) {
            if ($currentParent == $category['parent_id']) {
                if ($currLevel > $prevLevel) echo "<ul id='" . $category['parent_id'] . "' class='collapse show' data-bs-parent='#" . $category['parent_id'] . "'>";
                if ($currLevel < $prevLevel) {

                }
                if ($currLevel == $prevLevel) {

                }
                echo '<li><a class="widget-link" href="#' . $category['parent_id'] . '" ' . (($currLevel == 0) ? 'data-bs-toggle="collapse"' : '') . '>' . $category['name'] . '</a>';
                if ($currLevel > $prevLevel) {
                    $prevLevel = $currLevel;
                }
                $currLevel++;
                createTree($array, $categoryId, $currLevel, $prevLevel);
                $currLevel--;
            }
        }
        if ($currLevel == $prevLevel) echo "</li></ul>";
    }

Sample HTML:

<div class="widget widget-categories">
  <h3 class="widget-title">Collapsible categories</h3>
  <ul id="categories">
    <li>
      <a class="widget-link" href="#clothing" data-bs-toggle="collapse">
        Clothing
        <small class="text-muted ps-1 ms-2">235</small>
      </a>
      <ul class="collapse show" id="clothing" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Blazers & Suits</a></li>
        <li><a class="widget-link" href="#">Cardigans</a></li>
        <li><a class="widget-link" href="#">Dresses</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#shoes" data-bs-toggle="collapse">
        Shoes
        <small class="text-muted ps-1 ms-2">210</small>
      </a>
      <ul class="collapse" id="shoes" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Athletic shoes</a></li>
        <li><a class="widget-link" href="#">Balerinas & Flats</a></li>
        <li><a class="widget-link" href="#">Boots</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#electronics" data-bs-toggle="collapse">
        Electronics
        <small class="text-muted ps-1 ms-2">197</small>
      </a>
      <ul class="collapse" id="electronics" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Computers & Accessories</a></li>
        <li><a class="widget-link" href="#">TV, Video & Audio</a></li>
        <li><a class="widget-link" href="#">Smartphones & Tablets</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#accessories" data-bs-toggle="collapse">
        Accessories
        <small class="text-muted ps-1 ms-2">124</small>
      </a>
      <ul class="collapse" id="accessories" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Bags</a></li>
        <li><a class="widget-link" href="#">Belts</a></li>
        <li><a class="widget-link" href="#">Hats</a></li>
      </ul>
    </li>
  </ul>
</div>

Database:

| cID | cPID (parent ID)  | cSlug | cName                                   |
|-----|-------------------|-------|-----------------------------------------|
| 1   | 0                 |       | category_name_women                  |
| 2   | 0                 |       | category_name_men                    |
| 3   | 0                 |       | category_name_baby                   |
| 4   | 0                 |       | category_name_women_clothing|
| 5   | 1                 |       | category_name_women_accessories |
| 6   | 1                 |       | category_name_women_bag |
| 7   | 1                 |       | category_name_women_shoes   |
| 8   | 6                 |       | category_name_women_bag_name_handbag|
| 9   | 6                 |       | category_name_women_bag_name_hanger_bag |
| 10  | 6                 |       | category_name_women_bag_name_backpack   |
| 11  | 4                 |       | category_name_women_clothing_bottoms|
| 12  | 4                 |       | category_name_women_clothing_dresses|

Thank you!

[Dani]

So I see you currently have code in place to create a big tree with all your categories. Do you want to be able to click on them and have them expand/collapse without refreshing the entire page? If so, this can only be accomplished with Javascript.

[emsanator]

Javascript is available and main categories can be opened and closed, but I was not able to place the data-bs-toggle="collapse" tag in the subcategory titles -> "category_name_women_clothing", "category_name_women_bag", and "category_name_women_shoes". It can't detect javascript because I can't embed it. How can I add data-bs-toggle="collapse" to subcategory titles?

[michael.dewitt.716]

I would try to approach this as a multi-tiered menu level where you can query (group by) PID, then group by cPID for further refinement. Two tables will help with. Hopefully, that gets the gears turning.

[Dani]

Oh, I see. You’re using Twitter Bootstrap. This should be an easy fix. I use Bootstrap for DaniWeb. I’ll look into it when I get home tonight. Currently on my phone.

[Dani]

So sorry! I forgot to reply to this the other day.

I do see you have class="collapse show" That means you want it to be shown by default, not collapsed. I would remove the show class. Also, remove the collapsed class. Let the Javascript handle that itself.

Are you including Bootstrap's JS file? It might help to provide a live link to where this isn't working so we can investigate the whole page and make sure there are no javascript errors causing it to not work.

https://getbootstrap.com/docs/5.1/components/collapse/