Accordion down arrow / chevron?


Topic: Accordion down arrow / chevron?

D3 Analytics pro asked 6 months ago

Hi,

https://mdbootstrap.com/docs/standard/components/accordion/

Did the Accordion component used to show a down arrow when closed? I.e., provide a contextual clue to the user that they can open the accordion...

Recently upgraded to 7.3.0, and the down chevron has disappeared from the UI.

We use this in a search form to show/hide multiple search facets - so the hint for the user to open these was useful.

Thanks! Stuart


Kamila Pieńkowska staff answered 5 months ago

This a bug. We will fix it as soon as possible. Until than you can add this styles:

.accordion {
  --mdb-accordion-btn-icon: var(--mdb-accordion-btn-active-icon)
}

It will restore arrows but they will be blue.


Stuart pro commented 5 months ago

Hi Kamila,

Deployed 7.3.1 this evening and the down chevrons are back ;)

Thanks for the quick bugfix - awesome work.

Stuart.


Maurice Grimberg pro premium priority answered 6 months ago

Same problem here. We use FontAwesome.


Kamila Pieńkowska staff answered 6 months ago

What version of MDB package did you upgraded from and what version of Font Awesome do you have in your project?


Stuart pro commented 6 months ago

Hi Kamila,

From 7.2.0 to 7.3.0, and using:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css

I don't see the down chevron appearing on the MDB docs either - tried clearing browser cache etc... If you click to open an accordion, the up chevron will appear to indicate that the accordion can be closed. Not sure what's going on ;)

Thanks, Stuart


Kamila Pieńkowska staff commented 6 months ago

Try in incognito mode with extensions disabled.


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
  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.0
  • Device: pc
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes