title: On click of an icon, Open a popping text area
body: <p>On a click of an <code>font-awesome</code> icon, I want to open a text area which pops up a little.</p>
  
  <p>Here's how my HTML looks like </p>
  
  <pre><code>&lt;div class="profile-div"&gt;
   &lt;div class="header"&gt;
    &lt;img src="assets/images/image.png" alt=""&gt;&lt;h3 &gt;&lt;/h3&gt;
     &lt;a href="#" class="bttn3"&gt;Edit Profile&lt;/a&gt;
   &lt;/div&gt;
   &lt;p&gt;Add a description about your self.. 
    &lt;a href="#"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/a&gt;
   &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the <a href="https://jsfiddle.net/5efcokhq/4/" rel="nofollow noreferrer">fiddle</a> for the same. On click of the pencil icon, I want a text area to pop up a bit, maybe just like it happens on the facebook.</p>