JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section_wrapper">
      <article>
          <h2>東京</h2>
          <p>
      東京（とうきょう）は、日本の関東地方南部に位置し、1869年2月11日（明治2年1月1日）以来、日本の首都機能を担う都市であり、日本の事実上の首都である。
          </p>
          <h3>概要</h3>
          <p>
      現在（2010年代時点）、国際連合の統計によると、東京は世界最大のメガシティと評価されており、川崎、横浜などとともに世界最大の人口を有する都市圏を形成している。都市単位の経済規模(GDP)ではニューヨークを凌ぎ、世界最大である。2012年、アメリカのシンクタンクが公表したビジネス・人材・文化・政治などを対象とした総合的な世界都市ランキングにおいて、ニューヨーク、ロンドン、パリに次ぐ世界第4位の都市と評価された。
          </p>
          <h3>地名の由来</h3>
          <p>
      「東京」の地名は、1868年9月（慶応4年（明治元年）7月）に出された江戸ヲ称シテ東京ト為スノ詔書により、江戸の町奉行支配地域を管轄する東京府が設置されたことに始まる。
江戸は東京と称することになったが、読み方については根拠となるような法令が出たわけでもなかった。「とうきやう」（呉音）が正規に使われたが、明治20年代頃までは「とうけい」（漢音）も混在して用いられることも少なくなかった。日刊新聞の発達により人々が情報を共有する機会が広がり、第1期国定国語教科書で「東京」の振り仮名が「トーキョー」と表記され（棒引き仮名遣い）、混在はなくなった。一方、昭和初期までは「東亰」という表記も混用されていた。この「亰」という文字は「京」の俗字である。「亰」を使ったのは、中国の東京（Dongjing、ドンジン）との混同を防ぐためともいわれるが、後に同じ字となった。
江戸を東京と改称するという構想は、江戸時代後期の経世家である佐藤信淵が文政6年（1823年）に著した『混同秘策』に既に現われており、大久保利通はこれに影響を受けて江戸を東京とする建言をしたという。
          </p>
          <h2 id="heading2">「東京」の範囲</h2>
          <p>
歴史的に、江戸時代の江戸市域を中心に東京が形成されたが、下記のように、東京府、東京市から東京都成立という歴史もあり、様々な範囲のとらえ方が見られ、曖昧模糊としている。「多極分散型国土形成促進法」には「東京圏」と表現し、それには市部が含まれている。
          </p>
          <h3>東京都区部</h3>
          <p>
      東京都区部は、東京都東部の23の特別区から構成される地域である。旧東京市15区（麹町区・神田区・日本橋区・京橋区・芝区・麻布区・赤坂区・四谷区・牛込区・小石川区・本郷区・下谷区・浅草区・本所区・深川区）の各区部は後に大東京35区に再編・拡大され、戦後東京22区を経て現在の東京23区となった。
          </p>
          <h3>東京市の後裔としての東京都</h3>
          <p>
      東京都は東京市と東京府が合併して成立したことにより、公的に旧東京市地域を管轄する地方自治体として位置づけられており、オリンピックの招致活動などでは東京都知事が東京の市長として扱われる。これはロンドン（グレーター・ロンドン）と似た構造となっている。
          </p>
          
      </article>
      <nav id="tocible">
      </nav>
  </div>

CSS

* {
      margin:0;
      padding:0;
  }
  body, html {
      background:#fff;
  }
 

  #section_wrapper {
      padding:20px 0;
      font-size:16px;
      line-height:26px;
      position:relative;
      overflow:auto;
  }
  #section_wrapper article {
      overflow:hidden;
      margin-left:200px;
    width:300px;
  }
  #section_wrapper h2 {
      font-size:30px;
      font-weight:normal;
      margin-top:12px;
      margin:28px 0 10px 0;
  }
  #section_wrapper h3 {
      font-size:22px;
      margin:15px 0 10px 0;
      font-weight:normal;
  }
  #tocible {
      background:#eee;
      position:absolute;
      left:10px;	
	width:170px;
  }
  

  #details > div {
      position:absolute;
      display:none;
      font-weight:normal;
      width:90%;
      text-align:center;
  
  }

  #usage > p {
      margin-top:10px;
      padding:0 100px;
  }
  #usage div {
      display:inline-block;
      vertical-align:top;
  }
  #usage .html {
      margin:10px;

  }
  #usage .html p {
      margin:5px;
  }
  #usage .script {
      margin:10px;
      width:350px;
  }
  #usage .script p {
      margin:5px;
  }
  #options div {
      
      margin:20px auto;
      text-align:left;
  }
 
  label:hover {
      cursor:pointer;
      text-decoration:underline;
  }

JavaScript

/*
 * jquery.tocible.js v1.1.0, Tocible
 *
 * Copyright 2014 Mark Serbol.   
 * Use, reproduction, distribution, and modification of this code is subject to the terms and 
 * conditions of the MIT license, available at http://www.opensource.org/licenses/MIT.
 *
 * A lightweight jQuery plugin for creating table of contents navigation menu
 * https://github.com/markserbol/tocible
 *
 */

;
(function($) {
    var defaults = {
        heading: 'h2',
        subheading: 'h3',
        navigation: 'nav',
        title: '',
        hash: false,
        offset: 50,
        speed: 800,
        collapsible: false
    };

    $.fn.tocible = function(options) {
        var opts = $.extend({}, defaults, options);

        return this.each(function() {
            var wrapper = $(this),
                nav, heading, subheading, left;

            nav = wrapper.find(opts.navigation);

            left = nav.offset().left;

            nav.addClass('tocible').html('<ul/>');

            wrapper.append(nav).css({
                'position': 'relative'
            });

            if (opts.title) {
                var title = $(opts.title).length ? $(opts.title).text() : opts.title;
                var head = $('<div/>', {
                    class: 'tocible_header',
                    html: '<span/>' + title
                });

                head.prependTo(nav).click(function() {
                    $(this).siblings('ul').slideToggle({
                        duration: 'slow',
                        step: contain
                    });

                    $(this).find('span').toggleClass('toc_open');
                });
            }

            heading = wrapper.find(opts.heading);
            subheading = wrapper.find(opts.subheading);

            heading.add(subheading).each(function() {
                var el = $(this),
                    href, title, type, anchor, list;

                href = el.attr('id') ? '#' + el.attr('id') : '#';
                title =...