Automatic Table of Contents

Developer
Chris Coyier
Size
2,869 Kb
Views
26,312
  1. Automatic Table of Contents Previews
  2. Automatic Table of Contents HTML Codes
  3. Automatic Table of Contents CSS Codes
  4. Automatic Table of Contents JS Codes

How do I make an automatic table of contents?

What is a automatic table of contents? How do you make a automatic table of contents? This script and codes were developed by Chris Coyier on 01 December 2022, Thursday.

Automatic Table of Contents Previews
IQ Test

Automatic Table of Contents - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Automatic Table of Contents</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #eee; padding: 20px;
}
article { max-width: 50em; background: white; padding: 2em; margin: 1em auto;
}
.table-of-contents { float: right; width: 40%; background: #eee; font-size: 0.8em; padding: 1em 2em; margin: 0 0 0.5em 0.5em;
}
.table-of-contents ul { padding: 0;
}
.table-of-contents li { margin: 0 0 0.25em 0;
}
.table-of-contents a { text-decoration: none;
}
.table-of-contents a:hover,
.table-of-contents a:active { text-decoration: underline;
}
h3:target { animation: highlight 1s ease;
}
@keyframes highlight { from { background: yellow; } to { background: white; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <article> <h1>Documentation</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <div class="all-questions"> <h3 id="one">How do you smurf a murf?</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="two">How do many licks does a giraffe?</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="three">Which Frank is?</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="four">Is fourteen enough?</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="five">Is a circle an oval y/n?</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="six">Many mongerals manifest mountains</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="seven">How would you like a soda drink?</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="eight">I would very much like a soda drink.</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <h3 id="nine">Thank you for accepting the soda drink.</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Automatic Table of Contents - Script Codes CSS Codes

body { background: #eee; padding: 20px;
}
article { max-width: 50em; background: white; padding: 2em; margin: 1em auto;
}
.table-of-contents { float: right; width: 40%; background: #eee; font-size: 0.8em; padding: 1em 2em; margin: 0 0 0.5em 0.5em;
}
.table-of-contents ul { padding: 0;
}
.table-of-contents li { margin: 0 0 0.25em 0;
}
.table-of-contents a { text-decoration: none;
}
.table-of-contents a:hover,
.table-of-contents a:active { text-decoration: underline;
}
h3:target { animation: highlight 1s ease;
}
@keyframes highlight { from { background: yellow; } to { background: white; }
}

Automatic Table of Contents - Script Codes JS Codes

var ToC = "<nav role='navigation' class='table-of-contents'>" + "<h2>On this page:</h2>" + "<ul>";
var newLine, el, title, link;
$("article h3").each(function() { el = $(this); title = el.text(); link = "#" + el.attr("id"); newLine = "<li>" + "<a href='" + link + "'>" + title + "</a>" + "</li>"; ToC += newLine;
});
ToC += "</ul>" + "</nav>";
$(".all-questions").prepend(ToC);
Automatic Table of Contents - Script Codes
Automatic Table of Contents - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded December 01, 2022
Rating 4
Size 2,869 Kb
Views 26,312
Do you need developer help for Automatic Table of Contents?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Voting is our Voice
Bookmarklet to make the text between 45 and 75 characters turn red.
Play Button for YouTube
JQuery Draggable with out jQuery UI
Row and Column Highlighting with CSS Only
Merging Flexbox Syntaxes
Animation to Explain CSS Triangles
Simple Responsive Form
Airtable Emoji Poll
Stairway Hover Nav
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!