title: How to make expandable div to show first element and toggle rest
body: <p>I have few sections on my webpage with different type of news stories. Some with images, some without (just text). I want be able to display the first paragraph or first div of each story and then on click toggle the whole content of the div (story). </p>
  
  <p>I've found this bit of code on CSS Tricks website:</p>
  
  <pre><code>var news = 2;
  
  hidenews = "- Hide news archive";
  shownews = "+ Show news archive";
  
  $(".archive").html( shownews );
  $(".news:not(:lt("+news+"))").hide();
  
  $(".archive").click(function (e) {
     e.preventDefault();
         if ($(".news:eq("+news+")").is(":hidden")) {
             $(".news:hidden").show();
             $(".archive").html( hidenews );
         } else {
             $(".news:not(:lt("+news+"))").hide();
             $(".archive").html( shownews );
         }
  });
  
  &lt;div class="news"&gt;First news&lt;/div&gt;
  &lt;div class="news"&gt;Second news&lt;/div&gt;
  &lt;div class="news"&gt;Third news&lt;/div&gt;
  &lt;a class="archive" href="#"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>It works great, but only with one div. With multiple ones on the page when I click show button it opens all the divs. </p>
  
  <p>Can anyone help me to edit the code so only one story opens on click not all of them, please?</p>