тумблер эффект читать далее

Question

<div class="post-content"> 
     <p>Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text Random text >Random text >Random text </p> 
     <p>More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text More text </p> 
     <span class="more">more/less</span> 
</div> 

---

$('.post-content p:not(:first-child)').css('display', 'none'); 

$(".more").click(function() { 
    $('.post-content p:not(:first-child)').css('display', 'block'); 
}); 

demo

Проблема очевидна. Мне нужно сделать эффект toogle, чтобы показать скрыть все p после первого абзаца.

Answer 1

Использование hide и toggle вместо:

// cache elements so you don't repeatedly query the DOM 
toggleParas = $('.post-content p:not(:first-child)'); 

toggleParas.hide(); 

$(".more").click(function() { 
    toggleParas.toggle(); 
}); 

Answer 2

Demo

$('.post-content p:eq(1)').hide(); 

$(".more").click(function() { 
    $(this).prev('p').slideToggle(); 
});