Accordion arrows - down arrow for open tab on page load


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

Chris Sweeney pro premium asked 2 years 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?


mlazaru staff answered 2 years ago

Hi,

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


Chris Sweeney pro premium commented 2 years ago

Thanks - have done so at https://mdbootstrap.com/snippets/jquery/sweens/4417238


Chris Sweeney pro premium commented 2 years 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!


mlazaru staff answered 2 years 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


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: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No