title: multiple Buttons opens up same action but different ID container
body: <p>I have multiple Buttons (12 at the moment), all have the same id with following letter.
  each btn fire up a same function but different ID container.
  here is the HTML:</p>
  
  <pre><code>&lt;!----the btnS--&gt;
  &lt;div id="projectA"&gt;&lt;/div&gt;
  &lt;div id="projectB"&gt;&lt;/div&gt;
  &lt;div id="projectC"&gt;&lt;/div&gt;
  &lt;!--- The ContentS---&gt;
  &lt;div class="content_projectA"&gt;this is content A!!!!
      &lt;div id="closeA"&gt;
          &lt;p class="text"&gt;close&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="content_projectB"&gt;this is content B!!!!
      &lt;div id="closeB"&gt;
          &lt;p class="text"&gt;close&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="content_projectC"&gt;this is content C!!!!
      &lt;div id="closeC"&gt;
          &lt;p class="text"&gt;close&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a code that working but it contains more than 500 lines... 
  here is the JS:</p>
  
  <pre><code>$(document).ready(function () {
      $("#projectA").on("click", function () {
          $(".content_projectA").slideDown();
          $('html,body').animate({
              scrollTop: 300
          }, 200);
      });
  
      $("#closeA").on("click", function () {
          $(".content_projectA").hide();
          $('html,body').animate({
              scrollTop: 200
          }, 400);
      });
  });
  
  //---- B -------//
  
  $(document).ready(function () {
      $("#projectB").on("click", function () {
          $(".content_projectB").slideDown();
          $('html,body').animate({
              scrollTop: 300
          }, 200);
      });
  
      $("#closeB").on("click", function () {
          $(".content_projectB").hide();
          $('html,body').animate({
              scrollTop: 200
          }, 400);
      });
  });
  
  //---- C -------//
  
  $(document).ready(function () {
      $("#projectC").on("click", function () {
          $(".content_projectC").slideDown();
          $('html,body').animate({
              scrollTop: 300
          }, 200);
      });
  
      $("#closeC").on("click", function () {
          $(".content_projectC").hide();
          $('html,body').animate({
              scrollTop: 200
          }, 400);
      });
  });
  </code></pre>
  
  <p>I am looking for a way to short it up.</p>
  
  <p>here is the code on fiddle- <code>http://jsfiddle.net/mirifarr/6j060L2k/</code>
  Many thanks</p>