title: this.parent toggleClass of another child div
body: <p>I am new to jQuery and I can't figure this out.</p>
  
  <p>When I click on the first toggleButton, I would like to target the first textContainerCollapsed and toggle its class with textContainerExpanded. And if I click on the second toggleButton, I would like the second textContainerCollapsed to toggle its class with textContainerExpanded and so on...</p>
  
  <p>However, the result I have been getting is that all divs with the textContainerCollapsed are being affected regardless of which toggleButton I click.</p>
  
  <p>js</p>
  
  <pre><code>$(function() {
      $(".toogleButton") click(function() {
  
          $(".textContainerCollapsed").toogleClass("textContainerExpanded",500);
  
          //Also tried
          //$(this).parent(".textContainerCollapsed").toogleClass("textContainerExpanded",500);
  
          //Also tried
          //$(this).parent.children(".textContainerCollapsed").toogleClass("textContainerExpanded",500);
  
          //Also tried
          //$(this).parent.next(".textContainerCollapsed").toogleClass("textContainerExpanded",500);
  
          //Also tried
          //$(this).parent(".parent").next(".textContainerCollapsed").toogleClass("textContainerExpanded",500);
  
          //Also tried
          //$(this).parent(".parent").children(".textContainerCollapsed").toogleClass("textContainerExpanded",500);
  
          //Also tried
          //$(this).parent(".parent").find(".textContainerCollapsed").toogleClass("textContainerExpanded",500);
  
      });
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="buttonContainer"&gt;
          &lt;a href="#" class="toogleButton"&gt;
      &lt;/div&gt;
      &lt;div class="textContainerCollapsed"&gt;
          Some text
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent"&gt;
      &lt;div class="buttonContainer"&gt;
          &lt;a href="#" class="toogleButton"&gt;
      &lt;/div&gt;
      &lt;div class="textContainerCollapsed"&gt;
          Some text
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.textContainerCollapsed
  {
      height: 0px;
      overflow: hidden;
  }
  .textContainerExpanded
  {
      height: 100%;
      overflow: hidden;
  }
  </code></pre>