Double-purpose Dropdown

  1. Physical activities
    1. Playing soccer
    2. Dancing
  3. Relaxing activities
    1. Watching movies
    2. Meditate
  5. Others

Code

<button>Focusable element before</button>
<ol data-adg-dropdown="">
  <li>
    <a href="http://www.google.ch/search?q=physical">Physical activities</a>
  </li>
  <li>
    <button aria-expanded="false">▾<span class="visually-hidden">Open physical activities</span></button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Playing soccer</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Dancing</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=relaxing">Relaxing activities</a>
  </li>
  <li>
    <button aria-expanded="false">▾<span class="visually-hidden">Open relaxing activities</span></button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=movies">Watching movies</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=meditate">Meditate</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=others">Others</a>
  </li>
</ol>
<p>
  <button>Focusable element after</button>
</p>
*:focus {
  outline: 2px dotted #000;
}

p {
  clear: left;
}
p button {
  margin-top: 20px;
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

ol {
  padding: 0;
}
ol > li {
  float: left;
  list-style: none;
  position: relative;
}
ol a, ol button {
  display: block;
  border: 1px solid #000;
  color: #000;
  background-color: lightyellow;
  padding: 10px;
  width: 170px;
  box-sizing: border-box;
  text-decoration: none;
}
ol a:hover, ol button:hover {
  text-decoration: underline;
}
ol button {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  width: 31px;
  height: 40px;
  border-left: none;
  margin-left: -1px;
}
ol button:hover {
  cursor: pointer;
}
ol button[aria-expanded=true] + ol {
  position: absolute;
  right: 0;
}
ol button[aria-expanded=true] + ol a {
  width: 200px;
}
ol button[aria-expanded=false] + ol {
  display: none;
}
(function() {
  var AdgDropdown;

  AdgDropdown = class AdgDropdown {
    constructor(el) {
      this.$el = $(el);
      this.initExpandables();
    }

    initExpandables() {
      return this.$el.find("[aria-expanded]").click((e) => {
        var $button, $container;
        $button = $(e.target);
        $container = $($button.next("*"));
        if ($container.is(':visible')) {
          return this.hide($button, $container);
        } else {
          return this.show($button, $container);
        }
      });
    }

    show($button, $container) {
      $container.attr('hidden', false);
      return $button.attr('aria-expanded', true);
    }

    hide($button, $container) {
      $container.attr('hidden', true);
      return $button.attr('aria-expanded', false);
    }

  };

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

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFNLGNBQU4sTUFBQSxZQUFBO0lBQ0UsV0FBYSxDQUFDLEVBQUQsQ0FBQTtNQUNYLElBQUMsQ0FBQSxHQUFELEdBQU8sQ0FBQSxDQUFFLEVBQUY7TUFDUCxJQUFDLENBQUEsZUFBRCxDQUFBO0lBRlc7O0lBSWIsZUFBaUIsQ0FBQSxDQUFBO2FBQ2YsSUFBQyxDQUFBLEdBQUcsQ0FBQyxJQUFMLENBQVUsaUJBQVYsQ0FBNEIsQ0FBQyxLQUE3QixDQUFtQyxDQUFDLENBQUQsQ0FBQSxHQUFBO0FBQ3ZDLFlBQUEsT0FBQSxFQUFBO1FBQU0sT0FBQSxHQUFVLENBQUEsQ0FBRSxDQUFDLENBQUMsTUFBSjtRQUNWLFVBQUEsR0FBYSxDQUFBLENBQUUsT0FBTyxDQUFDLElBQVIsQ0FBYSxHQUFiLENBQUY7UUFFYixJQUFHLFVBQVUsQ0FBQyxFQUFYLENBQWMsVUFBZCxDQUFIO2lCQUNFLElBQUMsQ0FBQSxJQUFELENBQU0sT0FBTixFQUFlLFVBQWYsRUFERjtTQUFBLE1BQUE7aUJBR0UsSUFBQyxDQUFBLElBQUQsQ0FBTSxPQUFOLEVBQWUsVUFBZixFQUhGOztNQUppQyxDQUFuQztJQURlOztJQVVqQixJQUFNLENBQUMsT0FBRCxFQUFVLFVBQVYsQ0FBQTtNQUNKLFVBQVUsQ0FBQyxJQUFYLENBQWdCLFFBQWhCLEVBQTBCLEtBQTFCO2FBQ0EsT0FBTyxDQUFDLElBQVIsQ0FBYSxlQUFiLEVBQThCLElBQTlCO0lBRkk7O0lBSU4sSUFBTSxDQUFDLE9BQUQsRUFBVSxVQUFWLENBQUE7TUFDSixVQUFVLENBQUMsSUFBWCxDQUFnQixRQUFoQixFQUEwQixJQUExQjthQUNBLE9BQU8sQ0FBQyxJQUFSLENBQWEsZUFBYixFQUE4QixLQUE5QjtJQUZJOztFQW5CUjs7RUF1QkEsQ0FBQSxDQUFFLFFBQUYsQ0FBVyxDQUFDLEtBQVosQ0FBa0IsUUFBQSxDQUFBLENBQUE7V0FDaEIsQ0FBQSxDQUFFLHFCQUFGLENBQXdCLENBQUMsSUFBekIsQ0FBOEIsUUFBQSxDQUFBLENBQUE7YUFDNUIsSUFBSSxXQUFKLENBQWdCLElBQWhCO0lBRDRCLENBQTlCO0VBRGdCLENBQWxCO0FBdkJBIiwic291cmNlc0NvbnRlbnQiOlsiY2xhc3MgQWRnRHJvcGRvd25cbiAgY29uc3RydWN0b3I6IChlbCkgLT5cbiAgICBAJGVsID0gJChlbClcbiAgICBAaW5pdEV4cGFuZGFibGVzKClcbiAgICBcbiAgaW5pdEV4cGFuZGFibGVzOiAtPlxuICAgIEAkZWwuZmluZChcIlthcmlhLWV4cGFuZGVkXVwiKS5jbGljayAoZSkgPT5cbiAgICAgICRidXR0b24gPSAkKGUudGFyZ2V0KVxuICAgICAgJGNvbnRhaW5lciA9ICQoJGJ1dHRvbi5uZXh0KFwiKlwiKSlcbiAgICAgIFxuICAgICAgaWYgJGNvbnRhaW5lci5pcygnOnZpc2libGUnKVxuICAgICAgICBAaGlkZSgkYnV0dG9uLCAkY29udGFpbmVyKVxuICAgICAgZWxzZVxuICAgICAgICBAc2hvdygkYnV0dG9uLCAkY29udGFpbmVyKVxuICAgICAgICBcbiAgc2hvdzogKCRidXR0b24sICRjb250YWluZXIpIC0+XG4gICAgJGNvbnRhaW5lci5hdHRyKCdoaWRkZW4nLCBmYWxzZSlcbiAgICAkYnV0dG9uLmF0dHIoJ2FyaWEtZXhwYW5kZWQnLCB0cnVlKVxuICAgIFxuICBoaWRlOiAoJGJ1dHRvbiwgJGNvbnRhaW5lcikgLT5cbiAgICAkY29udGFpbmVyLmF0dHIoJ2hpZGRlbicsIHRydWUpXG4gICAgJGJ1dHRvbi5hdHRyKCdhcmlhLWV4cGFuZGVkJywgZmFsc2UpXG4gICAgXG4kKGRvY3VtZW50KS5yZWFkeSAtPlxuICAkKCdbZGF0YS1hZGctZHJvcGRvd25dJykuZWFjaCAtPlxuICAgIG5ldyBBZGdEcm9wZG93biBAIl19
//# sourceURL=coffeescript