Introduction
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.
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!
Hi,
This is great and I love the checkboxes, have even added them to my website. But is there a way of keeping the checkboxes checked after visitors refresh the page by using localstorage? That would be great if we could keep the boxes checked whenever people return to the site. Do you have any ideas on how to do this?
Thank you.
We added some cookie code to store it using cookie.js.
I wont give a full tutorial but here is our code (not formatted or made it pretty yet)
Glad it helped you and you like it 😀
Hey,
Thanks so much for replying and for providing the code. I added it to my website as new JS code, but after adding it I’m unable to check any of the checkboxes off. They seem clickable but nothing happens. Do you know what this might be?
Again, thank you so much for helping out. Hope you stay safe and well.
All the best!
Hi Peter,
I had the same question as F.A.C. about the page refresh. So I tried your code here for cookies, but I also experience the same issue – now I can’t click on the checklist items.
Any thoughts on why this isn’t working?
Not sure, sorry this was not part of the blog. Will look to create another about this in the future for you
Now I’m acting like readers of my blog haha MORE MORE! 🙂 Thanks man! I’m looking into it too.
haha.. what Next Nelson? What should we do – possible collab? Much love for you bro!
Hi,
I’m trying to make use of your Create Checklist tutorial (https://diviengine.com/how-to-create-a-to-do-checklist-using-jquery-and-css/), but unfortunately I don’t have a background in using CSS and JQuery.
1. I pasted the HTML code in a Divi text module and the default list items showed up, but I’m getting some lines after each item. Here’s a screenshot of how it looks: http://snpy.in/qFzMVK
2. Also, I’m guessing I should paste the CSS code in the tutorial in the Main Element of the Divi Text module? When I do that, I get an “Expected COLON” message. Here’s a screenshot of that: http://snpy.in/JR73hc
3. Finally, I just need to know where to put the jQuery code that you include in your tutorial. What part of the module does that go in?
I really like the design of the checklist, and I really appreciate your tutorial. I know that I’m not a Divi Engine member, but I would be willing to pay if need be for a little help on this tutorial.
Hi Bakari,
1) Not sure why you get the lines, try do the next 2 steps and see if it fixes it.
2) Add the CSS to Divi > Theme Options > Custom CSS and not on the page
3) Add the jQuery to Divi > Theme Options > Integrations > Body