title: how to hide a child div and add class name for parent using jquery on click
body: <pre><code>    &lt;li&gt;
      &lt;h4 class="title-exp-coll title-expand"&gt;
      &lt;span class="exp-coll"&gt;&lt;/span&gt;Bookmarks&lt;/h4&gt;
      &lt;div class="item-list"&gt;
      &lt;ul&gt;      
      &lt;li class="first"&gt;&lt;div&gt;first Asset&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;Latest Updates&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;asset image&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;test Asset 1&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
      &lt;h4 class="title-exp-coll title-expand"&gt;
      &lt;span class="exp-coll"&gt;&lt;/span&gt;Menu&lt;/h4&gt;
      &lt;p&gt;No menu.&lt;/p&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
      &lt;h4 class="title-exp-coll title-expand"&gt;
      &lt;span class="exp-coll"&gt;&lt;/span&gt;Main Menu&lt;/h4&gt;
      &lt;div class="item-list"&gt;
      &lt;ul&gt;      
      &lt;li&gt;&lt;div&gt;asset image&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div&gt;test Asset 1&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/div&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>Below is the code:</p>
  
  <p>My expected result is when I click on the <strong>span class "exp-coll"</strong> inside the <code>&lt;h4&gt;</code> tag</p>
  
  <ol>
  <li><p>the corresponding <strong>next</strong> <code>&lt;div&gt;</code> or <strong>next</strong> <code>&lt;p&gt;</code> tag should hide</p></li>
  <li><p><strong>in h4 tag the class "title-expand" should be removed and "title-collapse" should be added.</strong></p></li>
  <li><p>in the mean time when i click the <strong>span class "exp-coll"</strong> second time the opposite should happen.</p></li>
  <li><p>That is the corresponding <strong>next</strong> <code>&lt;div&gt;</code> or <strong>next</strong> <code>&lt;p&gt;</code> tag should <strong>SHOW</strong></p></li>
  <li><p><strong>in h4 tag the class "title-collapse" should be removed and "title-expand" should be added.</strong></p></li>
  </ol>
  
  <p>How can this be done using jQuery..</p>
  
  <p>Any help will be thankful and grateful...</p>