Show/hide completed tasks

Initial mode

The To Do List has two display modes for tasks:

• show all tasks (default)
• hide completed tasks

Hide completed tasks on startup so users focus on outstanding ones. Set taskShape.completed.taskHide to true. See the taskShape reference for details. The example below hides completed tasks on initialization:

const list = new ToDo("#root", {
    tasks,
    taskShape: {
        completed: {
            behavior: "manual",
            taskHide: true
        }
    }
});

Switch between modes

After initialization, switch between modes in one of two ways:

• through the Completed tasks → Show/Hide option of the Toolbar menu
• through the hideCompletedTasks() and showCompletedTasks() methods

The snippet below shows how to hide or show completed tasks at runtime:

list.hideCompletedTasks();
// or
list.showCompletedTasks();