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.toggle-details", $task).click(function() {
    toggleDetails($task);
});

Then we implement the toggleDetails() method:

function toggleDetails($task)
{
    $(".details", $task).slideToggle();
    $("button.toggle-details", $task).toggleClass("expanded");
}

The toggleDetails() method uses a couple of new jQuery methods that we haven't seen yet. It toggles the visibility of the task details using slideToggle() and toggles the expanded class on the button using toggleClass(). The toggleClass() method adds a class to an element if the element doesn't already have it, and removes it if it does.

The slideToggle() method is an animation function that toggles the visibility of an element. It makes an element visible using a sliding down motion pushing the elements below it down. To hide the element it slides it back up, shrinking it until it's hidden. There is also a method to fade elements in and out called fadeToggle(). But a slide provides a smoother transition when an element moves other elements out of the way when it becomes visible.

Now let's add some styling to the button. Of course we want some nice icons like our other task buttons, so let's add them to our sprite sheet file, icons.png. We need an image to show when the task properties are collapsed and one to show when they are expanded. Let's create a second row of images for these two icons.

The first thing we need to do back in our stylesheet is set display to none for the details so that they are hidden by default:

#task-list .task .details
{
 display: none;
    /* Not shown… */
}

Then we add styles for the toggle-details button. As we are using the same sprite sheet as the task tools buttons, we'll use the same style for our new button by adding it to the CSS selector. Then we'll add selectors to get the images into the button using background position offsets:

#task-list .task .tools button,
#task-list .task button.toggle-details
{
    /* Not shown… */
    background: url(images/icons.png);
}
#task-list .task button.toggle-details
{
    background-position: 0 -16px;
}
#task-list .task button.toggle-details.expanded
{
    background-position: -16px -16px;
}

The vertical offset for our toggle-details images is -16px because they are on the second row in the sprite sheet. Notice that the second image matches to the expanded class. We are adding the expanded class to the button when details are visible.

What just happened?

We added a toggle button to each task that hides or shows the task details when clicked. Open it in the browser and see what we have now. You can open and close task details and they smoothly slide open and closed. Pretty cool.