This should do it:

    <!-- Table of Contents -->
    <input id="toggle-wiki-index" type="button" value="Show/Hide TOC"/>
    <div id="wiki-index">
        <div class="toc">Table of Contents</div>
    </div>
    <!-- Table of Contents -->
    <script language="javascript" type="text/javascript" src="//code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
    $(document).ready(function(){
    $(".ms-rtestate-field h1, .ms-rtestate-field h2, .ms-rtestate-field h3, .ms-rtestate-field h4").each(function(i){
    $(this).attr("id", "title" + i);
    if ( $(this).is("h1")) {
    $(this).attr("class", "toch1");
    }    
    if ( $(this).is("h2")) {
    $(this).attr("class", "toch2");
    }
    if ( $(this).is("h3")) {
    $(this).attr("class", "toch3");
    }
    if ( $(this).is("h4")) {
    $(this).attr("class", "toch4");
    }    
    $("#wiki-index").append("<a href='#title" + i + "' title='" + $(this).attr("class") + "'>" + $(this).text() + "</a><br />");
    })   
    $("#toggle-wiki-index").click(function(){$("#wiki-index").toggle();})
    }); 
    </script>
    <style>
    #wiki-index{
    width: 250px;
    border: none;
    background-color: whitesmoke;
    float: right; 
    margin-top: 10px; 
    margin-left: 10px;
    padding: 10px;
    padding-top: 0px;
    }
    #wiki-index .toc{
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    padding: 5px;
    padding-left: 0px;
    }
    #wiki-index a[title=toch2] {
    font-size:15px; 
    font-weight: bold;
    } 
    #wiki-index a[title=toch2] {
    font-size:12px; 
    font-weight: bold; 
    margin-left:5px;
    } 
    #wiki-index a[title=toch3] {
    font-size:11px; 
    font-weight: normal; 
    margin-left: 15px;
    } 
    #wiki-index a[title=toch4] {
    font-size:10px; 
    font-weight: normal; 
    margin-left: 25px;
    } 
    </style>