Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html id="top" lang="en" class="js">
<head>
<meta name="viewport" content="width=device-width">
<meta content-type="utf-8" />
<title>Tabs</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
​
  <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>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi excepturi molestias modi sed harum, assumenda, cupiditate deleniti magni eaque velit quidem voluptate mollitia, consequatur sit sint quos dolorum perspiciatis omnis!</p>
  <a href="#top">top</a>
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
rempro
0viewers