show and hide is not happening properly in html through jquery -

i did .toggle() functionality in jquery on content. when click on read more button text link disappears , first paragraph becomes invisible.

here jquery code

 $(document).ready(function(){     $('article p').hide();     $('article p').eq(0).show();     $('p.read-more').show();     $('p.read-more').click(function(){         $('article p').show('slow');         $('article').css('background', '#f5f5f5').show('slow');         $(this).text('read less');         return false;         });     }) 

html code

<article class="content"> <p>dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1  </p>  <p>dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1  </p>  <p>dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1  </p> <p>dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1 dummy text 1  </p> <p class="read-more">read more</p> </article> 

here suggestion hides other ps start. changed read more link hand cursor , gave id, if have many sets, need use class , closest find parent content want expand

live demo

 $(function() {     $("#more").on("click",function(e) {       e.preventdefault();       $(".content p:gt(0)").slidetoggle("slow",function() {         var visible = $(".content p:gt(0)").is(':visible');         $("#more").text(visible ? 'read less' : 'read more');         $('.content').css('background', visible ?'#f5f5f5' : '#fff');         });       }); });  

using css this:

.content p{     display:none; } .content p:first-child { /* or nth-child(n+3) if want more 1 */     display:block; }