This should do itUpdated (changed the location and style of the link to mimic the one from Wikipedia):
<!-- Table of Contents -->
<input
<div id="wiki-index">
<span class="toc">Table of Contents</span> [<a id="toggle-wiki-index" type="button" value="Show/Hide TOC"href="#">hide</>a>]
<div id="wiki-index">content">
<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"content").append("<a href='#title" + i + "' title='" + $(this).attr("class") + "'>" + $(this).text() + "</a><br />");
})
$("#toggle-wiki-index").click(function(){$("#wiki-index"content").toggle(); $("#toggle-wiki-index").text( $("#wiki-content").is(":visible") ? "hide" : "show");})
});
</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>