Active State after 'openOnInit' about accordion HOT 3 CLOSED

Hi @marianohsn
The applied styles are correct. The difference between the first and second images is that the :focus styles are applied to the second image because the element clicked is focused.

    .ac-trigger:focus {
      color: $color-grey;
    }

If you want to apply styles also when the element is active, you need to edit this fragment:

  &.is-active {
    .ac-panel {
      visibility: visible;
    }

    & > .ac-header .ac-trigger {
      // TRIGGER STYLES   <--

      &::after {
        content: '\2013';
      }
    }
  }

from accordion.

Hello @michu2k - Thank you for your reply

Shouldn't the openOnInit: [X] function also change the corresponding header/button to its focused state when triggered? I assumed that woud be the logical behaviour.

Otherwise, I could try simulating a click, or altering the style of the expanded header via JS.

from accordion.

I checked the official W3 accordion demo and it looks like they are doing exactly the same, applying styles to the currently focused element. I would say that using the same styles for the focus state and the open state can be a bit confusing for someone who uses Tab for navigation.

Otherwise, I could try simulating a click, or altering the style of the expanded header via JS.

You can just add an additional className and manage the styles via CSS or modify activeClass property.

from accordion.