title: JQuery Show Hide Multiple Div Button
body: <p>I need to develop a News page with 3 articles that can be hidden or showed one by one, by means of 2 buttons: "Show more news" and "Show less news"
  Each article must be hidden/displayed by clicking the relevant button only once, starting from the last article (at the bottom page) to the first one (top of page). HTML:</p>
  
  <pre><code>&lt;!-- Articles--&gt;
  &lt;article id="art-1" class="row" &gt;My first Art&lt;/article&gt;
  &lt;article id="art-2" class="row art" &gt;My second Art&lt;/article&gt;
  &lt;article id="art-3" class="row art" &gt;My last Art&lt;/article&gt;
  
  &lt;!--Buttons--&gt;
  &lt;button class="button-grey" id="show-less-news1"&gt;Show Less&lt;/button&gt;
  &lt;button class="button-grey" id="show-less-news2"&gt;Show Less&lt;/button&gt;
  &lt;button class="button-grey" id="show-less-news3"&gt;Show Less&lt;/button&gt;
  &lt;button class="button-grey" id="show-more-news1"&gt;Show More&lt;/button&gt;
  &lt;button class="button-grey" id="show-more-news2"&gt;Show More&lt;/button&gt;
  &lt;button class="button-grey" id="show-more-news3"&gt;Show More&lt;/button&gt;
  </code></pre>
  
  <p>I managed to do this with JQuery but the code is extremely verbose and I need 6 buttons instead of 2, but I believe there must be a simplier way to get the same result with a less complex code. This is the JQuery code:</p>
  
  <pre><code>$("#show-more-news1").css({display:'none'});
  $("#show-more-news2").css({display:'none'});
  $("#show-more-news3").css({display:'none'});
  $("#show-less-news1").css({display:'none'});
  $("#show-less-news2").css({display:'none'});
      //function 1 less
  $("#show-less-news3").click(function(){
  $("#art-3").hide(400);
  $("#show-less-news3").hide();
  $("#show-more-news3").show();
  $("#show-less-news2").show();
  });
      //function 2 less
  $("#show-less-news2").click(function(){
  $("#art-2").hide(400);
  $("#show-less-news2").hide();
  $("#show-more-news3").hide();
  $("#show-less-news1").show();
  $("#show-more-news2").show();
  });
      //function 3 more
  $("#show-more-news3").click(function(){
  $("#art-3").show(400);
  $("#show-more-news3").hide();
  $("#show-less-news2").hide();
  $("#show-less-news3").show();
  });
      //function 3 less
  $("#show-less-news1").click(function(){
  $("#art-1").hide(400);
  $("#show-less-news1").hide();
  $("#show-more-news2").hide();
  $("#show-more-news1").show();
  });
      //function 2 more
  $("#show-more-news2").click(function(){
  $("#art-2").show(400);
  $("#show-more-news2").hide();
  $("#show-less-news1").hide();
  $("#show-less-news2").show();
  $("#show-more-news3").show();
  });
      //function 1 more
  $("#show-more-news1").click(function(){
  $("#art-1").show(400);
  $("#show-more-news1").hide();
  $("#show-less-news1").show();
  $("#show-more-news2").show();
  });
  </code></pre>
  
  <p>Some CSS:</p>
  
  <pre><code>  article {
    position: realtive;
    width: 100%;
    height: 50px;
    border: 1px solid red;
    float:left;
    background-color: yellow;
  }
  .button-grey {
    display: block;
    background-color: #cfcfcf;
    width: 150px;
    height: 30px;
    float:right;
  }
  </code></pre>
  
  <p>Here's a <a href="http://codepen.io/anon/pen/WvRBqN" rel="nofollow">CodePen</a>. Can someone help me to get the same result with a better code?
  Thanks a lot!</p>