Time for action – hiding task details

This looks good, but it's also taking up a lot of room. If each task in the list is this long it will soon scroll off the page and we won't be able to see an overview of the task list very well. Since the task details are optional fields anyway, we can make our list more compact by not showing the details until the user wants to see them. We'll do that by hiding the details section and adding a toggle button next to the task name to show or hide the details when clicked.

First let's add the toggle details button next to the task name in our task template and give it a class named toggle-details:

<li class="task">
    <button class="toggle-details">+</button>
    <span class="task-name"></span>
    <!—- Not shown… -->
</li>

Now let's implement the toggle button in our JavaScript code. First we add a click event handler for the toggle button in the addTaskElement() method that calls the toggleDetails() method:

$("button...