title: Hide/show sibling-divs instead of using multiple ID's?
body: <p>This dropdown-script works with multiple dropdowns using different ID´s on the divs:</p>
  
  <p><strong><a href="http://jsfiddle.net/D2kGy/" rel="nofollow">http://jsfiddle.net/D2kGy/</a></strong> </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;div id="label_1" class="title"&gt;Title&lt;/div&gt;
  
      &lt;div id="drop_1" class="dropdown"&gt;
      Content
      &lt;/div&gt; &lt;!-- md --&gt;
  &lt;/div&gt; &lt;!-- ms --&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;div class="box"&gt;
      &lt;div id="label_2" class="title"&gt;Title&lt;/div&gt;
  
      &lt;div id="drop_2" class="dropdown"&gt;
      Content
      &lt;/div&gt; &lt;!-- md --&gt;
  &lt;/div&gt; &lt;!-- ms --&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).ready(function () {
      $(this).on('click',".box, .box div", function (e) {
          e.stopPropagation();
          var id = this.id.replace('label_', '');
          if ($("#drop_" + id).is(":hidden")) {
              $('.title_active').siblings('[id^=drop_]').hide();
              $('.title_active').removeClass("title_active");
              $("#drop_" + id).show();
              $(this).addClass("title_active");
              $(this).parent().addClass("ms_active");
          } else {
              $("#drop_" + id).hide();
              $(this).removeClass("title_active");
          }
      });
  });
  </code></pre>
  
  <p>The "problem" is that there have been more of those dropdowns/selectboxes then expected on the page so using ID´s is getting messy (to many different ID´s).</p>
  
  <p><strong>Question:</strong> Is there maybe some way of getting this script to work with just display/hide the sibling-divs to the <code>".box"</code> div? So no need of unique ID's for every dropdown-box?</p>