title: Jquery - how to differentiate between multiple buttons with the same class
body: <p>I am building a website with boxes that has a settings button which triggers a sliding-down-effect on the box.</p>
  
  <p>The button and the sliding-down-box have to be generated by a class each and not an id (as it is now), to make my code less complicated and short.</p>
  
  <p>Eventually it will be several buttons (btn1, btn 2, btn3 etc.) and boxes (box1, box2, box3 etc.), so to shorten my jQuery code I would like an overall code that triggers each button individually instead of trigger them all at the same time. It needs to be triggered by a class, because i'm planning on some php, where the user will be able to add a widget.</p>
  
  <p>Here is my example: <a href="http://www.danieldoktor.dk/test/test.html" rel="nofollow">http://www.danieldoktor.dk/test/test.html</a></p>
  
  <p>My code is this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="lists"&gt;
          &lt;header class="box_header" id="box1"&gt;
              &lt;h1&gt;HEADER 1&lt;/h1&gt;
              &lt;div class="setting" id="btn1"&gt;&lt;/div&gt;
              &lt;/header&gt;
   &lt;/div&gt;
  
   &lt;div class="lists"&gt;
          &lt;header class="box_header" id="box2"&gt;
              &lt;h1&gt;HEADER 2&lt;/h1&gt;
              &lt;div class="setting" id="btn2"&gt;&lt;/div&gt;
              &lt;/header&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>// widget 1
  
    $("#btn1").click(function () { 
      if(!$("#box1").hasClass('header-down')){
          $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
      }
      else{
          $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
      }
  
  }); 
  
  
  $(document).click(function() {
      if($("#box1").hasClass('header-down')){
          $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
  }
  });
  
  $("#box1").click(function(e) {
      e.stopPropagation(); // This is the preferred method.
             // This should not be used unless you do not want
                           // any click events registering inside the div
  });
  
  
  
   // widget 2
  
    $("#btn2").click(function () { 
      if(!$("#box2").hasClass('header-down')){
          $("#box2").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
      }
      else{
          $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
      }
  
  }); 
  
  
  $(document).click(function() {
      if($("#box2").hasClass('header-down')){
          $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
  }
  });
  
  $("#box2").click(function(e) {
      e.stopPropagation(); // This is the preferred method.
             // This should not be used unless you do not want
                           // any click events registering inside the div
  });
  </code></pre>
  
  <p>How would you go about making an overall script build with classes and not id's and still control each class as a unique id?
  See this psydo class which explain what I want:</p>
  
  <pre><code>// widget overall
  
        $(".someBtnClass").click(function () { 
          if(!$(".someBoxClass").hasClass('header-down')){
              $(".someBoxClass").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
          }
          else{
              $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
          }
  
      }); 
  
  
      $(document).click(function() {
          if($(".someBoxClass").hasClass('header-down')){
              $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
      }
      });
  
      $(".someBoxClass").click(function(e) {
          e.stopPropagation(); // This is the preferred method.
                 // This should not be used unless you do not want
                               // any click events registering inside the div
      });
  </code></pre>