title: How to hide and show the input element of the form in HTML
body: <p>Suppose I have a form which has some file fields:</p>
  
  <pre><code>        &lt;form action="" method="post" enctype="multipart/form-data" id="form"&gt;
          &lt;h3&gt;Ask &lt;/h3&gt;
          &lt;p&gt;&lt;/p&gt;
              &lt;div&gt;
              &lt;p&gt;&lt;label for="id_title"&gt;Topic&lt;/label&gt;:&lt;p&gt;
              &lt;p&gt;&lt;input id="id_title" type="text" name="title" maxlength="300" /&gt;&lt;p&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;p&gt;&lt;label for="id_pic"&gt;Picture&lt;/label&gt;:&lt;p&gt;
              &lt;p&gt;&lt;input type="file" name="pic" id="id_pic" /&gt;&lt;p&gt;
              &lt;p&gt;&lt;button type="button"&gt;Add more pictures&lt;/button&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;p&gt;&lt;label for="id_pic_1"&gt;Picture 1&lt;/label&gt;:&lt;p&gt;
              &lt;p&gt;&lt;input type="file" name="pic_1" id="id_pic_1" /&gt;&lt;p&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;p&gt;&lt;label for="id_pic_2"&gt;Picture 2&lt;/label&gt;:&lt;p&gt;
              &lt;p&gt;&lt;input type="file" name="pic_2" id="id_pic_2" /&gt;&lt;p&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;p&gt;&lt;label for="id_pic_3"&gt;Picture 3&lt;/label&gt;:&lt;p&gt;
              &lt;p&gt;&lt;input type="file" name="pic_3" id="id_pic_3" /&gt;&lt;p&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;p&gt;&lt;label for="id_pic_4"&gt;Picture 4&lt;/label&gt;:&lt;p&gt;
              &lt;p&gt;&lt;input type="file" name="pic_4" id="id_pic_4" /&gt;&lt;p&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;p&gt;&lt;label for="id_description"&gt;Details&lt;/label&gt;:&lt;p&gt;
              &lt;p&gt;&lt;textarea id="id_description" rows="10" cols="40" name="description"&gt;&lt;/textarea&gt;&lt;p&gt;
              &lt;/div&gt;
              &lt;button type="submit"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>Initially, I would like to hide pic_1, pic_2, pic_3 and pic_4 until user click the button under pic. I think javascript can do that but I am new to javascript. </p>
  
  <p>Can anyone give me some direction?</p>
  
  <p>Thanks.</p>