Topic: how to add html content in accordion-item title

wuohyeah priority asked 3 months ago


https://mdbootstrap.com/docs/vue/components/accordion/#section-flush

Can I add html in accordion-item title, such the red frame display of the screenshot below ? Expected behavior enter image description here

Actual behavior

Resources (screenshots, code snippets etc.)


Bartosz Cylwik staff answered 3 months ago


Hello. Unfortunately the headerTitle prop from MDBAccordionItem component only accepts strings so it won't be possible with the Accordion component.

If you need more advanced options (or content in your case) you can create a simple accordion component yourself. It should be pretty easy to do with use of the MDBCollapse component.

Click on a button (or any other header or a div) should toggle all values inside v-models of Collapsable elements - all but the one that you have clicked.

I think this example from our documentation could be helpful with what you want to achieve: https://mdbootstrap.com/docs/vue/components/collapse/#section-multiple-targets

Hope it helps!



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: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 5.0.0
  • Device: PC
  • Browser: chrome
  • OS: windows 11 pro
  • Provided sample code: No
  • Provided link: Yes