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

Navigation
0

How do I uniquely identify 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>
    
asked by anonymous 18.09.2018 / 21:29

1 answer

1

Following your own example 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 configure the divs normally, for example in your code you use #accordion_search_item1 as the first accordion and the .subcategories class to configure the nested accordion.

At the end the configuration will look 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 it up only once: 

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

Follow example

    
21.09.2018 / 23:59
Improve routes Why is my WHERE statement not working?