Skip to main content
updated answer
Source Link
Damjan Tomic
  • 3.7k
  • 3
  • 19
  • 18

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>

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>

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>
Source Link
Damjan Tomic
  • 3.7k
  • 3
  • 19
  • 18

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>