O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required