Topic: Accordion arrows - down arrow for open tab on page load

Chris Sweeney premium asked 1 year ago

I have an accordion with 3 tabs. When the page opens, the third tab is expanded - but the arrows for all tabs point down. Once you click on one of th tab headings, everything is displayed properly.

I'd expect the open tab to have the arrow pointing up, with the closed tabs' arrows pointing down.

Is there a simple way to change this?

Mateusz Lazaru staff answered 1 year ago

Thank you for your snippet!

I've found a little bug in the code. You added .collapsed class to the link, which should not have following class.

Check out my snippet to see the solution: my-snippet

Mateusz Lazaru staff answered 1 year ago


Could you recreate this problem in a snippet? In our docs all the examples seem to work properly.

Chris Sweeney premium commented 1 year ago

Thanks - have done so at

Chris Sweeney premium commented 1 year ago

It appears that it works if the open tab is the first panel in the accordion, but fails if, for example, you want the 2nd or 3rd panel to be expanded when the page loads.

I've redesigned the page so the open panel is first!

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No