Epxand a11y accordion panel dynamically via DOM event

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  isValid: false,
  
  actions: {
    submit() {
      if (this.get('isValid') === false) {
        this._openFirstPanel();
      }
    },
  },
  
  _openFirstPanel() {
    Ember.run.scheduleOnce('afterRender', () => {
      const firstItem = document.querySelector('.first-item');
      const firstHeader = document.querySelector('.first-header');
      const isOpen = firstItem.classList.contains('a11y-accordion-item--is-expanded');
      
      if (!isOpen) {
        firstHeader.click();
      }
    });
  },
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

small {
  font-size: 1.125rem;
  vertical-align: middle;
}

input,
textarea {
  width: 100%;
  padding: .325rem;
}

.a11y-accordion-header__trigger,
.a11y-accordion-panel-content {
  padding: 1rem;
}

.a11y-accordion-header__trigger {
  border-bottom: 1px dashed lightgray;
}

.field { margin-top: 1rem; }
.field:first-child { margin-top: 0; }

templates.application.hbs

<h1>A11Y Accordion - <small>Dynamically open panels</small></h1>
<hr><br><br>

<form>
  {{#collapsible-list class="my-collapsible"as |collapsible|}}
    {{#collapsible.item class="first-item" as |item|}}
      {{#item.header class="first-header" aria-level="4"}}Personal Information{{/item.header}}
      {{#item.panel class="first-panel"}}
        <div class="field">
          <label for="email">Email</label><br>
          <input type="email" id="email" placeholder="[email protected]">
        </div>

        <div class="field">
          <label for="tel">Mobile Phone</label><br>
          <input type="tel" id="tel" placeholder="000-000-0000">
        </div>
        
        <div class="field">
          <label for="message">Message</label><br>
          <textarea name="name" rows="8"></textarea>
        </div>
      {{/item.panel}}
    {{/collapsible.item}}

    {{#collapsible.item as |item|}}
      {{#item.header aria-level="4"}}Lorem Ipsum{{/item.header}}
      {{#item.panel}}
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      {{/item.panel}}
    {{/collapsible.item}}
  {{/collapsible-list}}
  
  <br>
  <button type="submit" {{action "submit"}}>Send Message</button>
</form>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-a11y-accordion": "1.0.7"
  }
}