Table Of Content

Dynamic table of content

by Imri Paloja

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://www.eurobytes.nl/css/framework.css">
<script src="http://www.eurobytes.nl/js/scripts.js"></script>
    <a class="show_hide" href="#">Table of Content</a>

<ul class="slidingDiv" id="tableofcontent" style="display: none;">

    <li>Privacy &amp; Security
        <ul>
            <li><a href="privacy-and-security#privacy">Privacy</a>
                <ul>
                    <li><a href="privacy-and-security#thensa">The NSA</a>
                    </li>
                    <li><a href="privacy-and-security#microsoft">Microsoft</a>
                    </li>
                    <li><a href="privacy-and-security#skype">Skype</a>
                    </li>
                    <li><a href="privacy-and-security#google">Google</a>
                    </li>
                    <li><a href="privacy-and-security#facebook">facebook</a>
                    </li>
                    <li><a href="privacy-and-security#whatsapp">WhatsApp</a>
                    </li>
                </ul>
            </li>
            <li><a href="privacy-and-security-security#security">Second part - Security</a>
                <ul>
                    <li><a href="privacy-and-security-security#tor">Tor browser</a>
                        <ul>
                            <li><a href="privacy-and-security-security#torubuntu">Ubuntu</a>
                            </li>
                            <li><a href="privacy-and-security-security#torwindows">Windows</a>
                            </li>
                            <li><a href="privacy-and-security-security#tormac">Mac os x</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="privacy-and-security-security#securephonecalls">Secure Phone calls</a>
                        <ul>
                            <li><a...

CSS

.show_hide {
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    color: #454545;
    display: block;
    margin-left: 142px;
    padding: 2px 5px;
    position: absolute;
    text-transform:uppercase;
    z-index: 2147483647;
}

#tableofcontent {  
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    font-size: 12px;
    padding-left: 20px;
    width: 250px;
}
#tableofcontent a {  
    text-decoration:none;
}

#tableofcontent a:hover {
    text-decoration:hover;
} 


a {
    font-size: 12px;
    color:#454545;
}

JavaScript

$(document).ready(function(){


    $(".slidingDiv").hide();
  $(".show_hide").show();
  
  $('.show_hide').click(function(){
  $(".slidingDiv").slideToggle();
  });

});