title: How to get sibling element (div) in Javascript?
body: <p>So I have this HTML:</p>
  
  <pre><code>&lt;div class="tip-box"&gt;
      &lt;div class="tip-title" onclick="toggleTip()"&gt;
          &lt;h2&gt;Tip 1&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="tip-content hidden"&gt;
          &lt;p&gt;Tip 1 content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this Javascript:</p>
  
  <pre><code>function toggleTip() {
      $(this).siblings(".tip-content").toggleClass("hidden");
  }
  </code></pre>
  
  <p>Hopefully it's obvious what this is supposed to do, but it doesn't work. Using <code>.siblings()</code> just doesn't seem to work in this way.</p>
  
  <p>What's the correct solution for this? To get the next sibling of a certain type or with a certain class and then hide/show it?</p>