Creating a dynamic paragraphs sidebar with JS and jQuery
Introduction
Having a sidebar that allows your visitors to get a general idea of the post’s structure, and to skip and freely navigate to any point, is a nice little addition that can make the reading experience more clear and interactive. You can see an example of it in the left sidebar of this website, as long as you’re not on mobile.
Creating such a component is really simple and requires a few lines of code, as long as you’re already using jQuery on your website (which is very likely). If you aren’t, you’ll just need to import it.
Importing jQuery
This is easy. Just add the following code between the <head></head> tags of your blog posts:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>Remember to replace the
3.5.1version string with the latest version of jQuery. It won't be a problem for now, but in a few years it might begin to be a little outdated.
Structuring your post’s HTML
If you want to have a fully functional sidebar, you’ll need to make two divs. The first one is for the sidebar itself; the second one is for your post content. This is because the sidebar’s JS code…
