Today we will be doing a tutorial on how to create a to do checklist on your website using HTML, CSS and jQuery. We were asked via email and on Facebook to create a tutorial of how we created our checklist here. So here we go, below is what we are going to achieve.

CSS and JS Checklist

The first thing we need to do is to set up the HTML structure. Below is the code we use for the list.

Some of the key things here are that you must have a div element around all your list items – you could add this class to the code or text module if you are using Divi. The second thing to make sure you have is to make sure each list item has a different name/id.

So once you have the HTML structure in place, let’s add some CSS to make it look great – below is the CSS with some explainations

Finally we add some jQuery which add classes to the list items when clicked or bind (focus)

That is it! You can now add as many list items as you want and also change the CSS to match your website. We hope this helps and any questions please get in touch!