I have a form with inputs are tasks with headers and its description. Is there any effective way in jQuery to make the details under header of each input able to toggle every time the header is clicked?

[![enter image description here](https://i.stack.imgur.com/o4IVt.png)](https://i.stack.imgur.com/o4IVt.png)

Here is the HTML:

```
<div class="todo-task">

    <div class="task-header">Sample Header</div>

    <div class="task-date">25/06/2017</div>

    <div class="task-description">Description</div>

</div>

```