1

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.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.