Css - InnerHTML of div is missed after hide div?

I am using Angular 17 and tailwind. My directive add and remove 'hidden' into class of marked div when cheking select/unselect situation of checkbox. My problem is the innerHTML of marked div is removed when this directive is runned.

import {
  Directive,
  ElementRef,
  Input,
  HostListener,
  Renderer2,
} from '@angular/core';

@Directive({
  selector: '[checkBoxAccordionTrigger]',
  standalone: true,
})
export class CheckBoxAccordionDirective {
  @Input('checkBoxAccordionTrigger') triggerId!: any;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('change') onChange() {
    const accordionBodyElement = this.renderer.selectRootElement(
      `[accordion-body="${this.triggerId}"]`
    );

    if (this.el.nativeElement.checked) {
      // this.renderer.removeClass(accordionBodyElement, 'hidden');
      this.renderer.removeStyle(accordionBodyElement, 'display');
    } else {
      // this.renderer.addClass(accordionBodyElement, 'hidden');
      this.renderer.setStyle(accordionBodyElement, 'display', 'hidden');
    }
  }
}

<div id="demands" class="mb-6 items-center">
    <div *ngFor="let departmentDemand of departmentDemandList; let i = index">
        <div class="mb-6 items-center">
            <p class="w-5/12 mr-4 font-semibold underline">{{i+1}} - {{departmentDemand.DepartmentName }} :</p>
        </div>

        <div class="mb-6" *ngFor="let demand of departmentDemand.Demands">
            <div class="flex items-center">
                <input type="checkbox" name="{{ demand.Name }}" value="{{ demand.Name }}" class="mr-2"
                    checkBoxAccordionTrigger="{{demand.Id}}">
                <label for="{{ demand.Id }}">{{ demand.Name }}</label>
            </div>

            <div class="mt-6 ml-8 " [attr.accordion-body]="demand.Id">
                <div *ngFor="let parameter of demand.Parameters" class="mb-2 items-center flex">
                    <label [for]="parameter.Id" class="w-3/12 block mr-4">{{ parameter.Name }} :</label>
                    <input [id]="parameter.Id" [name]="parameter.Name"
                        class="w-7/12 px-3 py-2 border rounded-md focus:outline-none focus:border-blue-200">
                </div>
            </div>

        </div>
    </div>
</div>

I tried to change marked div style between block and none but it is not working.