title: JQuery toggleClass parent and children
body: <p>I'm just getting to know Javascript and JQuery and I can't figure this out: Is there a shorter way for this:  </p>
  
  <pre><code>$(".toggle").click(function(){
  $(this).parent().toggleClass("collapsed");
  $(this).parent().children().toggleClass("collapsed");
  $(this).parent().next(".abcContent").toggle(0);
  </code></pre>
  
  <p>I'm glad I got it to work after all but surely this isn't how it's done properly... I want to toggle the parent class (abcTitle) including its children (i.e. button).</p>
  
  <pre><code>&lt;div class="abcTitle"&gt;
  &lt;div class="abcButton toggle"&gt;&lt;/div&gt;
  &lt;h4 class=toggle&gt;Title&lt;/h4&gt;&lt;div class="sortable"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="abcContent"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p>Thanks for enlightening me!</p>
  
  <p>For clarification here's some relevant CSS  </p>
  
  <pre><code>.abcButton {
      background-image:url(minus.png);
  }
  .abcButton.collapsed {
      background-image:url(plus.png); 
  }
  .abcTitle {
      border-top-left-radius:14px;
  }
  .abcTitle.collapsed {
      border-bottom-left-radius:14px;
  }
  </code></pre>
  
  <p>So basically a click on either abcButton or H4 is supposed to trigger the collapse of abcContent while adding class .collapsed to both abcButton and abcTitle.<br>
  (Btw, If I could figure out how to exclude </p>
  
  <pre><code>&lt;div class="sortable"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>from the click function I could just make abcTitle my click handler with no need to seperate abcButton and h4)</p>