Topic: how to add html content in accordion-item title
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
Actual behavior
Resources (screenshots, code snippets etc.)
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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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