Creating Table of Content using HTML & CSS (without Jquery)
<!DOCTYPE html>
<html>
<head>
<title>Table of Content</title>
<style>
body{
background-color:#D4E6F1;
height:auto;
font-family:arial,sans-serif;
font-size:14px;
}
* {
margin: 0;
padding: 0;
}
.wrapper1 {
margin: 0 auto;
text-align:center;
width:80%;
}
.toc {
<!-- list-style: outside none none; -->
margin-bottom:10px;
background: url("dot.gif") repeat-x scroll left bottom rgba(0, 0, 0, 0);
overflow: hidden;
}
.con {
float:left;
background: none repeat scroll 0 0 #D4E6F1;
}
.dots {
float:right;
background: none repeat scroll 0 0 #D4E6F1;
}
</style>
</head>
<body>
<h1 style="color:red; text-align:center;">Table of Content</h1>
<div class="toc wrapper1">
<div class="con">Introduction</div>
<div class="dots"> 1</div>
</div>
<div class="toc wrapper1">
<div class="con">Hello</div>
<div class="dots"> 2</div>
</div>
<div class="toc wrapper1">
<div class="con">Category</div>
<div class="dots">3</div>
</div>
</body>
</html>
Output will be:-
Here in above code table of content(toc) is created using simple html & css and ther is no need to use JavaScript or jquery.
For Creating TOC, using image for dotted line. Check in css:- background: url("dot.gif") repeat-x scroll left bottom rgba(0, 0, 0, 0);
