title: Expand/Collapse with JavaScript
body: <p>Can anyone suggest me how to perform expand and collapse operation with one click. I mean if I click on <em>&quot;pencil&quot;</em> it will expand like shown in <strong>figure 2</strong> , and when I click on <em>&quot;natraj Pencil&quot;</em> it will also expand as shown in <strong>figure 3</strong>.</p>
  <p>Now if I again click on <em>&quot;natraj Pencil&quot;</em> it will close as show in <strong>figure 2</strong> , and when I click on <em>&quot;pencil&quot;</em>, it will close  as shown in  <strong>figure 1</strong>. And all this operation needs to be performed with JavaScript, not jQuery.</p>
  <hr />
  <p><strong>Figure 1</strong></p>
  <pre><code>Pencil                                                                                                       
  </code></pre>
  <hr />
  <p><strong>Figure 2</strong></p>
  <pre><code>Pencil  
      Natraj Pencil  
      Afsara Pencil  
      Cello Pencil  
  </code></pre>
  <hr />
  <p><strong>Figure 3</strong></p>
  <pre><code>Pencil
      Natraj Pencil
           Natraj sented Pencil
           Natraj strechable Pencil
      Afsara Pencil
      Cello Pencil
  </code></pre>