Topic: Accordion with accessible

Yael Shrem premium asked 5 years ago


Can you give examlpe of right accordion with accessible?

Expected behavior An ccordion opens and closes only by clicking at the header

Actual behavior An accordion opens and closes with every click of the body

Resources (screenshots, code snippets etc.)


Bartosz Termena staff answered 5 years ago


Dear @Saban

Below is a simple example of accordion:

<mdb-accordion [multiple]="false">
  <mdb-accordion-item [collapsed]="false">
    <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
    <mdb-accordion-item-body>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
      non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
      beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
      craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
      VHS.
    </mdb-accordion-item-body>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
    <mdb-accordion-item-body>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
      non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
      beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
      craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
      VHS.
    </mdb-accordion-item-body>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
    <mdb-accordion-item-body>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
      non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
      beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
      craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
      VHS.
    </mdb-accordion-item-body>
  </mdb-accordion-item>
</mdb-accordion>

For more information I refer you to : https://mdbootstrap.com/docs/angular/advanced/accordion/#o-basic-accordion

Best Regards, Bartosz.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.2.0
  • Device: Browther
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No
Tags