Active State after 'openOnInit'

[marianohsn]

I'm passing the option: openOnInit: [2] in order to show the third accordion item expanded by default, but its corresponding header/button's style remains in collapsed state.

How can I make the header style change accordingly to expanded state when using openOnInit: []?

Incorrect state of third header after being triggered by openOnInit: [2]:

Correct state of third header after being triggered by user click:

[michu2k]

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';
      }
    }
  }

[marianohsn]

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.

[michu2k]

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.