Tab List with Radio Buttons

flowers (tablist)

Some info about rose

Bla bla bla… all about rose…

A beautiful rose

A link to a page with more infos about rose!

More elements can come here related to rose

Maybe even some form element where you can enter a name for your rose:

Code

<p>
  <button>Focusable element before</button>
</p>
<div class="tablist">
  <h1 class="visually-hidden">
    flowers (tablist)
  </h1>
  <p class="visually-hidden">
    Tablist help: use the tablist controls to toggle the visibility of their respective panels (below the controls).
  </p>
  <fieldset class="controls">
    <legend class="visually-hidden">Tablist controls</legend>
    <div class="control">
      <input checked="" class="visually-hidden" id="tablist_flowers_panel_rose" name="tablist_flowers" type="radio" value="tablist_flowers_panel_rose" /><label for="tablist_flowers_panel_rose"><span class="visually-hidden">Show panel </span>rose</label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="tablist_flowers_panel_tulip" name="tablist_flowers" type="radio" value="tablist_flowers_panel_tulip" /><label for="tablist_flowers_panel_tulip"><span class="visually-hidden">Show panel </span>tulip</label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="tablist_flowers_panel_sunflower" name="tablist_flowers" type="radio" value="tablist_flowers_panel_sunflower" /><label for="tablist_flowers_panel_sunflower"><span class="visually-hidden">Show panel </span>sunflower</label>
    </div>
  </fieldset>
  <div class="panel" id="tablist_flowers_panel_rose_panel" style="display: block">
    <h2 class="visually-hidden">
      rose (panel)
    </h2>
    <h3>
      Some info about rose
    </h3>
    <p>
      Bla bla bla... all about rose...
    </p>
    <p>
      <img alt="A beautiful rose" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about rose</a>!
    </p>
    <h3>
      More elements can come here related to rose
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your rose: <input type="text" />
    </p>
  </div>
  <div class="panel" id="tablist_flowers_panel_tulip_panel" style="display: none">
    <h2 class="visually-hidden">
      tulip (panel)
    </h2>
    <h3>
      Some info about tulip
    </h3>
    <p>
      Bla bla bla... all about tulip...
    </p>
    <p>
      <img alt="A beautiful tulip" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about tulip</a>!
    </p>
    <h3>
      More elements can come here related to tulip
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your tulip: <input type="text" />
    </p>
  </div>
  <div class="panel" id="tablist_flowers_panel_sunflower_panel" style="display: none">
    <h2 class="visually-hidden">
      sunflower (panel)
    </h2>
    <h3>
      Some info about sunflower
    </h3>
    <p>
      Bla bla bla... all about sunflower...
    </p>
    <p>
      <img alt="A beautiful sunflower" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about sunflower</a>!
    </p>
    <h3>
      More elements can come here related to sunflower
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your sunflower: <input type="text" />
    </p>
  </div>
</div>
<p>
  <button>Focusable element after</button>
</p>
.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body {
  padding: 20px;
}

.control {
  display: inline-block;
}
.control label {
  border: 1px solid black;
  margin: 0 0 -1px 0;
  padding: 4px 10px;
}

input[type=radio]:checked + label {
  background-color: lightyellow;
  border-bottom-color: lightyellow;
}

a:focus,
input:focus,
input[type=radio]:focus + label {
  outline: 2px dotted;
  outline-offset: 2px;
}

input[type=radio] + label:hover {
  cursor: pointer;
  text-decoration: underline;
}

.panel {
  border: 1px solid;
  background-color: lightyellow;
  padding: 0 0 0 10px;
}
(function() {
  $(document).ready(function() {
    return $("input[type='radio']").change(function() {
      var $current_radiobutton, current_panel_id, current_radiobutton_name;
      $current_radiobutton = $(this);
      current_radiobutton_name = $current_radiobutton.attr('name');
      current_panel_id = `#${$current_radiobutton.attr('value')}_panel`;
      return $(`[name='${current_radiobutton_name}']`).each((i, element) => {
        var $panel, $radiobutton, panel_id;
        $radiobutton = $(element);
        panel_id = `#${$radiobutton.attr('id')}_panel`;
        $panel = $(panel_id);
        if (panel_id === current_panel_id) {
          return $panel.show();
        } else {
          return $panel.hide();
        }
      });
    });
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxDQUFBLENBQUUsUUFBRixDQUFXLENBQUMsS0FBWixDQUFrQixRQUFBLENBQUEsQ0FBQTtXQUNoQixDQUFBLENBQUUscUJBQUYsQ0FBd0IsQ0FBQyxNQUF6QixDQUFnQyxRQUFBLENBQUEsQ0FBQTtBQUNsQyxVQUFBLG9CQUFBLEVBQUEsZ0JBQUEsRUFBQTtNQUFJLG9CQUFBLEdBQTJCLENBQUEsQ0FBRSxJQUFGO01BQzNCLHdCQUFBLEdBQTJCLG9CQUFvQixDQUFDLElBQXJCLENBQTBCLE1BQTFCO01BQzNCLGdCQUFBLEdBQTJCLENBQUEsQ0FBQSxDQUFBLENBQUksb0JBQW9CLENBQUMsSUFBckIsQ0FBMEIsT0FBMUIsQ0FBSixDQUFBLE1BQUE7YUFFM0IsQ0FBQSxDQUFFLENBQUEsT0FBQSxDQUFBLENBQVUsd0JBQVYsQ0FBQSxFQUFBLENBQUYsQ0FBeUMsQ0FBQyxJQUExQyxDQUErQyxDQUFDLENBQUQsRUFBSSxPQUFKLENBQUEsR0FBQTtBQUNuRCxZQUFBLE1BQUEsRUFBQSxZQUFBLEVBQUE7UUFBTSxZQUFBLEdBQWUsQ0FBQSxDQUFFLE9BQUY7UUFDZixRQUFBLEdBQWUsQ0FBQSxDQUFBLENBQUEsQ0FBSSxZQUFZLENBQUMsSUFBYixDQUFrQixJQUFsQixDQUFKLENBQUEsTUFBQTtRQUNmLE1BQUEsR0FBZSxDQUFBLENBQUUsUUFBRjtRQUVmLElBQUcsUUFBQSxLQUFZLGdCQUFmO2lCQUNFLE1BQU0sQ0FBQyxJQUFQLENBQUEsRUFERjtTQUFBLE1BQUE7aUJBR0UsTUFBTSxDQUFDLElBQVAsQ0FBQSxFQUhGOztNQUw2QyxDQUEvQztJQUw4QixDQUFoQztFQURnQixDQUFsQjtBQUFBIiwic291cmNlc0NvbnRlbnQiOlsiJChkb2N1bWVudCkucmVhZHkgLT5cbiAgJChcImlucHV0W3R5cGU9J3JhZGlvJ11cIikuY2hhbmdlIC0+XG4gICAgJGN1cnJlbnRfcmFkaW9idXR0b24gICAgID0gJChAKVxuICAgIGN1cnJlbnRfcmFkaW9idXR0b25fbmFtZSA9ICRjdXJyZW50X3JhZGlvYnV0dG9uLmF0dHIgJ25hbWUnXG4gICAgY3VycmVudF9wYW5lbF9pZCAgICAgICAgID0gXCIjI3skY3VycmVudF9yYWRpb2J1dHRvbi5hdHRyKCd2YWx1ZScpfV9wYW5lbFwiXG4gICAgXG4gICAgJChcIltuYW1lPScje2N1cnJlbnRfcmFkaW9idXR0b25fbmFtZX0nXVwiKS5lYWNoIChpLCBlbGVtZW50KSA9PlxuICAgICAgJHJhZGlvYnV0dG9uID0gJChlbGVtZW50KVxuICAgICAgcGFuZWxfaWQgICAgID0gXCIjI3skcmFkaW9idXR0b24uYXR0cignaWQnKX1fcGFuZWxcIlxuICAgICAgJHBhbmVsICAgICAgID0gJChwYW5lbF9pZClcbiAgICAgIFxuICAgICAgaWYgcGFuZWxfaWQgPT0gY3VycmVudF9wYW5lbF9pZFxuICAgICAgICAkcGFuZWwuc2hvdygpXG4gICAgICBlbHNlXG4gICAgICAgICRwYW5lbC5oaWRlKCkiXX0=
//# sourceURL=coffeescript