Accordion with ARIA

This is the first accordion entry

This is some content of the first entry.

And some link! Nice, isn’t it?

This is the second accordion entry

This is some cocntent of the second entry.

And finally a last paragraph.

Code

<button>Focusable element before</button>
<div data-adg-accordion="true">
  <h2 data-adg-accordion-target="first_entry">
    This is the first accordion entry
  </h2>
  <div id="first_entry">
    <p>
      This is some content of the first entry.
    </p>
    <p>
      And some <a href="#">link</a>! Nice, isn't it?
    </p>
  </div>
  <h2 data-adg-accordion-target="second_entry">
    This is the second accordion entry
  </h2>
  <div id="second_entry">
    <p>
      This is some cocntent of the second entry.
    </p>
    <p>
      <label for="some_input">Some input: </label><input id="some_input" type="text" />
    </p>
    <p>
      And finally a last paragraph.
    </p>
  </div>
</div>
<button>Focusable element after</button>
*:focus {
  outline: 2px dotted #000;
}

#first_entry,
#second_entry {
  display: none;
}

[data-adg-accordion] > a {
  display: block;
}
(function() {
  var AdgAccordion;

  AdgAccordion = class AdgAccordion {
    constructor(el) {
      this.$el = $(el);
      this.initHeadings();
      this.initTogglers();
    }

    initHeadings() {
      return this.$headings = this.$el.find('[data-adg-accordion-target]');
    }

    initTogglers() {
      return this.$headings.each(function() {
        var $container, $heading, $toggler, targetId;
        $heading = $(this);
        $toggler = $heading.wrap("<a href='#' aria-expanded='false'></a>").parent();
        targetId = $heading.attr('data-adg-accordion-target');
        $container = $('#' + targetId);
        $container.hide();
        return $toggler.click((e) => {
          $container.toggle();
          $toggler.attr('aria-expanded', $toggler.attr('aria-expanded') === 'false' ? 'true' : 'false');
          return e.preventDefault();
        });
      });
    }

  };

  $(document).ready(function() {
    return $('[data-adg-accordion]').each(function() {
      return new AdgAccordion(this);
    });
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFNLGVBQU4sTUFBQSxhQUFBO0lBQ0UsV0FBYSxDQUFDLEVBQUQsQ0FBQTtNQUNYLElBQUMsQ0FBQSxHQUFELEdBQU8sQ0FBQSxDQUFFLEVBQUY7TUFFUCxJQUFDLENBQUEsWUFBRCxDQUFBO01BQ0EsSUFBQyxDQUFBLFlBQUQsQ0FBQTtJQUpXOztJQU1iLFlBQWMsQ0FBQSxDQUFBO2FBQ1osSUFBQyxDQUFBLFNBQUQsR0FBYSxJQUFDLENBQUEsR0FBRyxDQUFDLElBQUwsQ0FBVSw2QkFBVjtJQUREOztJQUdkLFlBQWMsQ0FBQSxDQUFBO2FBQ1osSUFBQyxDQUFBLFNBQVMsQ0FBQyxJQUFYLENBQWdCLFFBQUEsQ0FBQSxDQUFBO0FBQ3BCLFlBQUEsVUFBQSxFQUFBLFFBQUEsRUFBQSxRQUFBLEVBQUE7UUFBTSxRQUFBLEdBQVcsQ0FBQSxDQUFFLElBQUY7UUFFWCxRQUFBLEdBQVcsUUFBUSxDQUFDLElBQVQsQ0FBYyx3Q0FBZCxDQUF1RCxDQUFDLE1BQXhELENBQUE7UUFFWCxRQUFBLEdBQVcsUUFBUSxDQUFDLElBQVQsQ0FBYywyQkFBZDtRQUNYLFVBQUEsR0FBYSxDQUFBLENBQUUsR0FBQSxHQUFNLFFBQVI7UUFDYixVQUFVLENBQUMsSUFBWCxDQUFBO2VBRUEsUUFBUSxDQUFDLEtBQVQsQ0FBZSxDQUFDLENBQUQsQ0FBQSxHQUFBO1VBQ2IsVUFBVSxDQUFDLE1BQVgsQ0FBQTtVQUNBLFFBQVEsQ0FBQyxJQUFULENBQWMsZUFBZCxFQUFrQyxRQUFRLENBQUMsSUFBVCxDQUFjLGVBQWQsQ0FBQSxLQUFrQyxPQUFyQyxHQUFrRCxNQUFsRCxHQUE4RCxPQUE3RjtpQkFDQSxDQUFDLENBQUMsY0FBRixDQUFBO1FBSGEsQ0FBZjtNQVRjLENBQWhCO0lBRFk7O0VBVmhCOztFQXlCQSxDQUFBLENBQUUsUUFBRixDQUFXLENBQUMsS0FBWixDQUFrQixRQUFBLENBQUEsQ0FBQTtXQUNoQixDQUFBLENBQUUsc0JBQUYsQ0FBeUIsQ0FBQyxJQUExQixDQUErQixRQUFBLENBQUEsQ0FBQTthQUM3QixJQUFJLFlBQUosQ0FBaUIsSUFBakI7SUFENkIsQ0FBL0I7RUFEZ0IsQ0FBbEI7QUF6QkEiLCJzb3VyY2VzQ29udGVudCI6WyJjbGFzcyBBZGdBY2NvcmRpb25cbiAgY29uc3RydWN0b3I6IChlbCkgLT5cbiAgICBAJGVsID0gJChlbClcbiAgXG4gICAgQGluaXRIZWFkaW5ncygpXG4gICAgQGluaXRUb2dnbGVycygpXG4gIFxuICBpbml0SGVhZGluZ3M6IC0+XG4gICAgQCRoZWFkaW5ncyA9IEAkZWwuZmluZCgnW2RhdGEtYWRnLWFjY29yZGlvbi10YXJnZXRdJylcbiAgICBcbiAgaW5pdFRvZ2dsZXJzOiAtPlxuICAgIEAkaGVhZGluZ3MuZWFjaCAtPlxuICAgICAgJGhlYWRpbmcgPSAkKEApXG4gICAgICBcbiAgICAgICR0b2dnbGVyID0gJGhlYWRpbmcud3JhcChcIjxhIGhyZWY9JyMnIGFyaWEtZXhwYW5kZWQ9J2ZhbHNlJz48L2E+XCIpLnBhcmVudCgpXG4gICAgICBcbiAgICAgIHRhcmdldElkID0gJGhlYWRpbmcuYXR0cignZGF0YS1hZGctYWNjb3JkaW9uLXRhcmdldCcpXG4gICAgICAkY29udGFpbmVyID0gJCgnIycgKyB0YXJnZXRJZClcbiAgICAgICRjb250YWluZXIuaGlkZSgpXG4gICAgICBcbiAgICAgICR0b2dnbGVyLmNsaWNrIChlKSA9PlxuICAgICAgICAkY29udGFpbmVyLnRvZ2dsZSgpXG4gICAgICAgICR0b2dnbGVyLmF0dHIoJ2FyaWEtZXhwYW5kZWQnLCBpZiAkdG9nZ2xlci5hdHRyKCdhcmlhLWV4cGFuZGVkJykgPT0gJ2ZhbHNlJyB0aGVuICd0cnVlJyBlbHNlICdmYWxzZScpXG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKVxuICAgIFxuJChkb2N1bWVudCkucmVhZHkgLT5cbiAgJCgnW2RhdGEtYWRnLWFjY29yZGlvbl0nKS5lYWNoIC0+XG4gICAgbmV3IEFkZ0FjY29yZGlvbiBAIl19
//# sourceURL=coffeescript