-1

I have a question, if somebody knows how to disable option to click and collapse accordion from MDBootstrap. In their documentation I cant find a way to do this. Here is link: https://mdbootstrap.com/docs/b5/angular/components/accordion/

Does anbody have an idea, how to do this? Here is exmaple with code, so I that is reason why I am not writing any code in the question.

Emaple:

<mdb-accordion
          [multiple]="true"
>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
     Accordion tab 1
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
     Accordion tab 2
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Accordion tab 3
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

Thanks to everyone.

devZ
  • 606
  • 1
  • 7
  • 23
  • The questions on SO should have [mre] – Vega Jul 03 '22 at 08:05
  • No need for stackblitz, its presence is not [mre]. The question post should have the code that can be reproduced and tested/debugged. Demo is the bonus but not requirement – Vega Jul 03 '22 at 09:23
  • I did this, but as I said MDBootstrap is not free so it can't reallly be reproduced if someone didn't puchase it. Thats the reason why I pasted a link with documentation.. I would be very happy if you could help me if there is possible to disable function to click on accordion.. – devZ Jul 03 '22 at 10:01

1 Answers1

1

I open all panels using this.accordion.expandAll(); and then pereventing panelChange event with event.preventDefault() to stop them from being collapsed afterwards.

https://ng-bootstrap.github.io/#/components/accordion/api#NgbPanelChangeEvent

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

<ngb-accordion
  #acc="ngbAccordion"
  activeIds="ngb-panel-0"
  (panelChange)="onPanelChange($event)">
  <ngb-panel #panel title="Simple">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia
    </ng-template>
  </ngb-panel>
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia
    </ng-template>
  </ngb-panel>
  <ngb-panel title="Something">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia
    </ng-template>
  </ngb-panel>
</ngb-accordion>


@Component({
  selector: 'ngbd-accordion-basic',
  templateUrl: './accordion-basic.html',
})
export class NgbdAccordionBasic implements AfterViewInit {
  @ViewChild('acc') accordion: any;

  ngAfterViewInit() {
    this.accordion.expandAll();
  }

  onPanelChange(event: any) {
    if (event?.nextState === false) {
      console.log('no change allowed!');
      event.preventDefault();
    }
  }
}

Working example: https://stackblitz.com/edit/angular-zakst1?file=src%2Fapp%2Faccordion-basic.html

MD BOOTSTRAP

Omit the data-mdb-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

https://mdbootstrap.com/docs/standard/components/accordion/#section-always-open

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • I tried to duplicate but without success. It seems like with MDBootstrap I can't use (panelChange).. It doesn't do anything, not even access the function (tried with console.log())... I am using this package: https://mdbootstrap.com/docs/b5/angular/components/accordion/ – devZ Jul 03 '22 at 06:48
  • Follow installation guides: https://ng-bootstrap.github.io/#/getting-started#installation `ng-bootstrap` is bootstrap for Angular. However if indeed you have to use MD then the API is slightly different and you have to refactor. https://mdbootstrap.com/docs/b5/angular/components/accordion/#docsTabsAPI Sorry, it's my mistake for not noticing you were talking about MD bootstrap. – Joosep Parts Jul 03 '22 at 06:59
  • Using MDB is a must for me sadly. In the API there is not a single line about how to disable accordion :S I am really lost with this. – devZ Jul 03 '22 at 07:26
  • Just copy paste this example. https://mdbootstrap.com/docs/standard/components/accordion/#section-always-open – Joosep Parts Jul 03 '22 at 07:47
  • Yes, but as i wrote in question. I need to make a specific tab disabled. So if some statement is true, user can't click on dropdown item and on other items he can – devZ Jul 03 '22 at 08:32