How to put one accordion into another without conflict?

Question

css

It is necessary to place one accordion from bootstrap into another one so that when opening the first, the points of the second do not open / close, and the third is still there.
here is the code (it turned out that when the first item is opened, all the others open, the second items close more normally, but when the third item closes, the first one closes)

<ul class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

<?php
foreach ($categories as $category) {
?>

    <?php
    $classes  = '';
    $classes2 = '';
    if ($category['category_id'] == $category_id) {
        $classes .= ' active';
        $classes2 = ' in';
    }
    
    if ($category['children']) {
        $classes .= ' dropdowndropdown-submenu';
    }
?>
       <li class="<?php
    echo $classes;
?> <?php
    if ($category['children']):
?>panel panel-default<?
    endif;
?>" >
            <a <?php
    if (empty($category['children'])):
?>href="<?php
        echo $category['href'];
?>" title="<?php
        echo $category['name'];
?>"<?
    else:
?>class="collapsed act" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?
        echo $category['category_id'];
?>" aria-expanded="false" aria-controls="collapse<?
        echo $category['category_id'];
?>"<?
    endif;
?>>
                <?php
    echo $category['name'];
?>
           </a> 

            <?php
    if ($category['children']) {
?>
           <ul class="dropdowndropdown-menu panel-collapse collapse <?php
        echo $classes2;
?> " id="collapse<?
        echo $category['category_id'];
?>" role="tabpanel" aria-labelledby="heading<?
        echo $category['category_id'];
?>">
                <?php
        
        foreach ($category['children'] as $child) {
            $classes = '';
            if ($child['children']) {
                $classes .= ' dropdowndropdown-submenu';
            }
            foreach ($child['children'] as $cha) {
                if (strpos($child['act'], '_' . $cha['category_id']))
                    $classes .= ' active';
                $classes2 = ' in';
            }
            if (strpos($child['act'], '_' . $child['category_id'])) {
                $classes .= ' active';
                $classes2 = ' in';
            }
            
?>
               <?php
            if ($child['children']):
?><div class="" id="accordion<?
                echo $child['category_id'];
?>"><?
            endif;
?>
               <li class="<?php
            echo $classes;
?> <?php
            if ($child['children']):
?>panel panel-default<?
            endif;
?>">
                    <a <?php
            if (empty($child['children'])):
?>href="<?php
                echo $child['href'];
?>" title="<?php
                echo $child['name'];
?>"<?
            else:
?>class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion<?
                echo $child['category_id'];
?>" href="#collapse<?
                echo $child['category_id'];
?>" aria-expanded="false" aria-controls="collapse<?
                echo $child['category_id'];
?>"<?
            endif;
?>> <?php
            echo $child['name'];
?></a>
                    <?php
            if ($child['children']) {
?>
                   
                    <ul class="dropdowndropdown-menu panel-collapse collapse <?
                echo $classes2;
?>" id="collapse<?
                echo $child['category_id'];
?>" role="tabpanel" aria-labelledby="heading<?
                echo $child['category_id'];
?>">
                        <?php
                
                foreach ($child['children'] as $subChild) {
                    $classes = '';
                    if ($subChild) {
                        $classes .= ' dropdowndropdown-submenu';
                    }
                    
                    if (strpos($_SERVER['REQUEST_URI'], $subChild['category_id'])) {
                        $classes .= ' active';
                        $classes2 = ' in';
                    }
?>
                       <li class="<?php
                    echo $classes;
?>">
                            <a href="<?php
                    echo $subChild['href'];
?>" title="<?php
                    echo $subChild['name'];
?>"><?php
                    echo $subChild['name'];
?></a>
                        </li>
                        <?php
                }
?>
                   </ul>
                        <?php
            }
?>
               </li>
                <?php
            if ($child['children']):
?></div><?
            endif;
?>
               <?php
        }
?>
           </ul>

                <?php
    }
?>

        </li>
<?php
}
?>
   </ul>

Answer 1

Damn, why so many things? The main thing is to choose the right accordions and everything will work great. Naturally, you need to make sure that the same classes are not repeated in different accordions. Nedano solved such a problem for the guys from Ukraine, everything works fine, I used JS