title: jQuery expandable input div
body: <p>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?</p>
  <p><a href="https://i.stack.imgur.com/o4IVt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o4IVt.png" alt="enter image description here" /></a></p>
  <p>Here is the HTML:</p>
  <pre><code>&lt;div class=&quot;todo-task&quot;&gt;
  
      &lt;div class=&quot;task-header&quot;&gt;Sample Header&lt;/div&gt;
  
      &lt;div class=&quot;task-date&quot;&gt;25/06/2017&lt;/div&gt;
  
      &lt;div class=&quot;task-description&quot;&gt;Description&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>