jquery 140char tab interface

by al nmeri

HTML

<div class="tab-wrapper">
  <ul class="tabs">
    <li><a class="tab" href="#dizzy">Dizzy</a></li>
    <li><a class="tab" href="#ninja">Ninja</a></li>
    <li><a class="tab" href="#missy">Missy</a></li>
  </ul>

  <div class="panel" id="dizzy">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/dizzy.jpg" alt="Photo of Dizzy">
    <dl>
      <dt>Name</dt>
      <dd>Dizzy</dd>
      <dt>Colour</dt>
      <dd>Tabby</dd>
      <dt>Super power</dt>
      <dd>Sleeping</dd>
    </dl>
  </div>
  <div class="panel" id="ninja">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/ninja.jpg" alt="Photo of Ninja">
    <dl>
      <dt>Name</dt>
      <dd>Lord Ninja of Catville</dd>
      <dt>Colour</dt>
      <dd>Black &amp; White</dd>
      <dt>Super power</dt>
      <dd>Most pathetic meow known to catkind</dd>
    </dl>
  </div>
  <div class="panel" id="missy">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/missy.jpg" alt="Photo of Missy">
    <dl>
      <dt>Name</dt>
      <dd>Missy</dd>
      <dt>Colour</dt>
      <dd>Black</dd>
      <dt>Super power</dt>
      <dd>Computer hardware protection</dd>
    </dl>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: helvetica;
  margin: 20px;
}

img {
  position: relative;
  border: 3px solid #000;
  height: 200px;
  width: 300px;
  object-fit: cover;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  margin-bottom: 10px;
}

.panel {
  border: 1px solid #ccc;
  overflow: scroll;
  margin-bottom: 10px;
}

ul li {
  border: 1px solid #ccc;
  padding: 10px;
  margin-right: 10px;
  float: left;
  display: block;
}

ul a {
  color: #000;
  text-decoration: none;
}

ul.tabs a:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

ul.tabs a.selected {
  background: #ccc;
  border-color: #ccc;
  color: #fff;
}

.panel {
  padding: 10px;
  width: 550px;
  overflow: hidden;
}

dl {
  float: right;
  width: 180px;
}

dt {
  font-weight: bold;
}

dd {
  color: #666;
  font-style: italic;
  margin-bottom: 5px;
  margin-left: 10px;
}

JavaScript

var tabs = $('.tab').click(function() {
  tabs.hide().filter(this.hash).show();
}).map(function() {
  return $(this.hash)[0];
});

$('.tab:first').click();