How to put a ui-accordion with another ui-accordion inside?

Question

How do I individualize the ui-accordion, the script is not loading?

Javascript:

$( function() {
     $("#accordion_search_item1,#accordion_search_item2,#accordion_search_item3")
    .accordion({
        collapsible:true,
        header:"h3.aba"
    });

    $('#sub_cat1,#sub_cat2,#sub_cat3').accordion({
        collapsible: true,
        header: "h3.dropdown-subcategories"
    });
});

HTML:

<div class="filter-itens" id="accordion_search_item1">
                    <h3 class="aba" ng-bind-html="type_filters.item1.title"></h3>
                    <div class="content-filter">
                        <div class="list-box">
                            <div id="list_categories" class="list-categories">
                                <div ng-repeat="filterCat in type_filters.item1.collection" class="categories">
                                    <div class="form-group">
                                        <label class="form-check-label" for="{{filterCat.id}}">
                                          <input class="checkbox" id="{{filterCat.id}}" type="checkbox" ng-model="filterCat.valor"> <span for="{{filterCat.id}}">{{filterCat.label}}</span>
                                         </label>
                                          <div class="subcategories">
                                                <h3 class="dropdown-subcategories">
                                                    <span>Dropdown</span>
                                                </h3>
                                               <div id="{{filterCat.sub_id}}" class="list-subcategories">
                                                   <label class="form-check-label" for="sub_cat_{{$index}}" ng-repeat="filterSubCat in filterCat.collection track by $index">
                                                       <input class="checkbox" id="sub_cat_{{$index}}" type="checkbox" ng-model="filterSubCat.ID"> <span for="{{filterSubCat.id}}">{{filterSubCat.name}}</span>
                                                   </label>
                                              </div>
                                          </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

Following your own sample code, from HTML:

<div class="filter-itens" id="accordion_search_item1">
  <h3 class="aba" ng-bind-html="type_filters.item1.title"></h3>
  <div class="content-filter">
    <div class="list-box">
      <div id="list_categories" class="list-categories">
        <div ng-repeat="filterCat in type_filters.item1.collection" class="categories">
          <div class="form-group">
            <label class="form-check-label" for="{{filterCat.id}}">
                                          <input class="checkbox" id="{{filterCat.id}}" type="checkbox" ng-model="filterCat.valor"> <span for="{{filterCat.id}}">{{filterCat.label}}</span>
                                         </label>
            <div class="subcategories">
              <h3 class="dropdown-subcategories">
                <span>Dropdown</span>
              </h3>
              <div id="{{filterCat.sub_id}}" class="list-subcategories">
                <label class="form-check-label" for="sub_cat_{{$index}}" ng-repeat="filterSubCat in filterCat.collection track by $index">
                                                       <input class="checkbox" id="sub_cat_{{$index}}" type="checkbox" ng-model="filterSubCat.ID"> <span for="{{filterSubCat.id}}">{{filterSubCat.name}}</span>
                                                   </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

In this case you should set up Divs normally, for example in your code you use #accordion_search_item1 as of the first accordion and the class .subcategories to set up internal accordion (nested).

In the end the setting will be like this in your case:

$("#accordion_search_item1,.subcategories").accordion({
    heightStyle: "content",
    collapsible: true,
    active: false
});

You could use a class (accordionbusca for example) and setting only once:

$(".accordionbusca").accordion({
    heightStyle: "content",
    collapsible: true,
    active: false
});

Following example