Show/hide button for wiki table of contents

Question

So, I have the code for a table of contents, but I'd like for it to have a show/hide button in the top right similar to an actual wikipedia page's TOC. Everything works as it should when I embed the code--just looking to add that button.

Here's what I have working thus far, please add whatever's necessary.

 <!-- Table of Contents -->
<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 />");
})   
}); 
</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>

I appreciate any help.

Answer 1

Updated (changed the location and style of the link to mimic the one from Wikipedia):

    <!-- Table of Contents -->

<div id="wiki-index">
    <span class="toc">Table of Contents</span> [<a id="toggle-wiki-index" href="#">hide</a>]
    <div id="wiki-content">

    </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-content").append("<a href='#title" + i + "' title='" + $(this).attr("class") + "'>" + $(this).text() + "</a><br />");
})   
$("#toggle-wiki-index").click(function(){$("#wiki-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>