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>
<head>
<link href="http://gregfranko.com/jquery.tocify.js/styles/bootstrap.css" rel="stylesheet" type="text/css">
<link href="http://gregfranko.com/jquery.tocify.js/src/stylesheets/Tocify/jquery.tocify.css" rel="stylesheet" type="text/css">
​
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.tocify.js/javascripts/bootstrap.js"></script>
<script src="http://gregfranko.com/jquery.tocify.js/src/javascripts/jquery.tocify.min.js"></script>
​
​
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .space {
    margin-top: 100px;
  }
  </style>
</head>
<body>
  
<div class="container-fluid">
<div class="row-fluid">
  <section class="span3">
    <div id="toc"></div>
  </section>
 
  <section class="span9">
    <h1>level 1</h1>
      <div class="space"></div>
      <h2>level 1.1</h2>
        <div class="space"></div>
        <h3>level 1.1.1</h3>
        <div class="space"></div>
        <h3>level 1.1.2</h3>
        <div class="space"></div>
      <h2>level 1.2</h2>
        <div class="space"></div>
        <h3>level 1.2.1</h3>
        <div class="space"></div>
        <h3>level 1.2.2</h3>
        <div class="space"></div>
      <h2>level 1.3</h2>
        <div class="space"></div>
        <h3>level 1.3.1</h3>
        <div class="space"></div>
        <h3>level 1.3.2</h3>
        <div class="space"></div>
    <h1> Level 2 </h1>
  </section>
  
</div>
</div>
​
<script>
  $(function(){
    $("#toc").tocify();
    
  });
  
  </script>
  
</body>
</html>
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers