Your issue is a result of an extra div
between your panel-group
and its contents. This extra div
is created as a result of using the template
. The placeholder of the template
is still present after it replaces its contents.
You can reproduce this by adding an extra div
between any of the working accordions in your example.
Unfortunately, the solution would be to not use templates.
Edit
You can use container-less template binding. (I just learned this myself!)
Try replacing:
<div data-bind="template: { name: 'allPersons', data: { Persons: Persons, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } }"></div>
<div data-bind="template: { name: 'allCities', data: { Cities: Cities, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } }"></div>
With:
<!-- ko template: { name: 'allPersons', data: { Persons: Persons, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } } -->
<!-- /ko -->
<!-- ko template: { name: 'allCities', data: { Cities: Cities, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } } -->
<!-- /ko -->