css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body id="tocifyDemo">
<nav id="toc" class="bs-docs-sidebar">
</nav>

<h1>Tocify demonstration for Arnon</h1>
<p>Sed at posuere elit. Fusce id nisi tincidunt, blandit quam at, mollis lorem. Aenean ac nisl nec lacus malesuada finibus. Cras sollicitudin, lorem et ultricies porttitor, massa odio maximus turpis, id facilisis erat arcu in lacus. Etiam urna urna, tempor quis turpis at, cursus rutrum augue. Sed sodales pharetra ipsum molestie tincidunt. Morbi sollicitudin porta erat, ut rutrum ligula commodo eu.</p>
<h2>First sub-heading</h2>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h2>Second sub-heading</h2>
<p>Aenean fermentum porttitor elit, a ultricies dui vestibulum ut. In hac habitasse platea dictumst. Quisque ultrices auctor viverra. Ut vulputate lacus id lectus efficitur mattis. Pellentesque sagittis a odio malesuada dapibus. Integer varius massa enim. Vivamus eu vehicula libero. Morbi porttitor nibh sed ipsum aliquet dignissim.

</p>
<h2>Third sub-heading</h2>
<p>Aliquam nec turpis et nibh mollis placerat. Fusce accumsan aliquet lectus in tincidunt. In blandit tempus augue, non elementum dolor imperdiet vel. Duis eget est odio. Vestibulum malesuada leo sit amet elit semper vehicula. Sed eget leo convallis, congue lorem porta, cursus urna. Mauris posuere imperdiet luctus. Nam et eleifend eros. Nullam condimentum purus vitae magna venenatis aliquam. Sed diam quam, congue a sodales at, iaculis id risus. Fusce viverra nisi vitae ligula faucibus malesuada eu vel tellus. Curabitur quis pellentesque libero, in tempus tortor. Quisque tempus arcu magna, vitae gravida augue laoreet et. Mauris blandit vestibulum fringilla. Sed sit amet ornare justo. Cras scelerisque molestie luctus.

</p>
<h2>Fourth sub-heading</h2>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h3>First sub-sub-heading</h3>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h3>Second sub-sub-heading</h3>
<p>Aenean fermentum porttitor elit, a ultricies dui vestibulum ut. In hac habitasse platea dictumst. Quisque ultrices auctor viverra. Ut vulputate lacus id lectus efficitur mattis. Pellentesque sagittis a odio malesuada dapibus. Integer varius massa enim. Vivamus eu vehicula libero. Morbi porttitor nibh sed ipsum aliquet dignissim.

</p>
<h3>Third sub-sub-heading</h3>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h4>First sub-sub-sub-heading</h4>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h4>Second sub-sub-sub-heading</h4>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h3>Fourth sub-sub-heading</h3>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h3>Fifth sub-sub-heading</h3>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
<h2>Fifth sub-heading</h2>
<p>Aliquam nec turpis et nibh mollis placerat. Fusce accumsan aliquet lectus in tincidunt. In blandit tempus augue, non elementum dolor imperdiet vel. Duis eget est odio. Vestibulum malesuada leo sit amet elit semper vehicula. Sed eget leo convallis, congue lorem porta, cursus urna. Mauris posuere imperdiet luctus. Nam et eleifend eros. Nullam condimentum purus vitae magna venenatis aliquam. Sed diam quam, congue a sodales at, iaculis id risus. Fusce viverra nisi vitae ligula faucibus malesuada eu vel tellus. Curabitur quis pellentesque libero, in tempus tortor. Quisque tempus arcu magna, vitae gravida augue laoreet et. Mauris blandit vestibulum fringilla. Sed sit amet ornare justo. Cras scelerisque molestie luctus.

</p>
<h2>Sixth sub-heading</h2>
<p>Aenean fermentum porttitor elit, a ultricies dui vestibulum ut. In hac habitasse platea dictumst. Quisque ultrices auctor viverra. Ut vulputate lacus id lectus efficitur mattis. Pellentesque sagittis a odio malesuada dapibus. Integer varius massa enim. Vivamus eu vehicula libero. Morbi porttitor nibh sed ipsum aliquet dignissim.

</p>
<h2>Seventh sub-heading</h2>
<p>Nullam justo dolor, vulputate at urna et, consequat consectetur sapien. Integer eu sapien pretium mi condimentum cursus. Integer venenatis congue est nec tempor. Nullam libero lacus, euismod vel neque in, viverra semper augue. Proin gravida metus dui, nec ultrices est fringilla vel. Phasellus semper id augue scelerisque lobortis. Aenean non lorem tortor.</p>
</body>
            
          
!
            
              /*  DON'T COPY THIS PART!  */
body#tocifyDemo {padding: 32px; max-width: 800px; }
/*    END OF DON'T COPY    */


/* The Table of Contents container element */

.tocify {
  overflow: auto;
  position: fixed;
  left: 1024px;
}


/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */

.tocify ul,
.tocify li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 30px;
}


/* Top level header elements */

.tocify-header {
  text-indent: 10px;
}


/* Top level subheader elements.  These are the first nested items underneath a header element. */

.tocify-subheader {
  text-indent: 20px;
  display: none;
  border-left-width: 1px !important;
}


/* Makes the font smaller for all subheader elements. */

.tocify-subheader li {
  font-size: 12px;
}


/* Further indents second level subheader elements. */

.tocify-subheader .tocify-subheader {
  text-indent: 30px;
}


/* Further indents third level subheader elements. You can continue this pattern if you have more nested elements. */

.tocify-subheader .tocify-subheader .tocify-subheader {
  text-indent: 40px;
}


/* Twitter Bootstrap Override Style */

.nav-list > li > a,
.nav-list .nav-header {
  margin: 0px;
}


/* Twitter Bootstrap Override Style */

.nav-list > li > a {
  padding: 5px;
}


/* sidebar */

.bs-docs-sidebar {
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}


/* all links */

.bs-docs-sidebar .nav>li>a {
  color: #999;
  font-size: 13px;
  font-weight: 400;
  border-left: 4px solid transparent;
  padding: 4px 20px;
}


/* nested links */

.bs-docs-sidebar .nav .nav>li>a {
  border-left-width: 2px;
}

.bs-docs-sidebar .nav .nav>ul>li>a {
  border-left-width: 1px;
}

.bs-docs-sidebar .nav .nav>li>a {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 30px;
  font-size: 12px;
}


/* active & hover links */

.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>li>a:hover,
.bs-docs-sidebar .nav>li>a:focus {
  color: #397bb7;
  text-decoration: none;
  background-color: transparent;
  border-left-color: #397bb7;
}


/* all active links */

.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
  font-weight: 700;
}


/* nested active links */

.bs-docs-sidebar .nav .nav>.active>a,
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
  font-weight: 500;
}


/* hide inactive nested list */

.bs-docs-sidebar .nav ul.nav {
  display: none;
}


/* show active nested list */

.bs-docs-sidebar .nav>.active>ul.nav {
  display: block;
}

@media screen and (max-width: 1280px) {
  .bs-docs-sidebar {
    display: none
  }
}
            
          
!
            
              $(document).ready(function() {
  var headingCount = $("h2,h3,h4,h5").length;
  if (headingCount > 1) {
    $("#toc").tocify({
      showEffect: "fadeIn",
      selectors: "h2,h3,h4,h5"
    });
  }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console