Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en" class="js">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta content-type="utf-8" />
<title>Tabs</title>
</head>
<body>
  <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>
</body>
</html>
 
* { 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;
}
 
var tabs = $('.tab').click(function () {
  tabs.hide().filter(this.hash).show();
}).map(function () {
  return $(this.hash)[0];
});
$('.tab:first').click();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rempro
0viewers