jquery slideToggle() erste Zeile zeigen

Question

Ich würde gerne SlideToggle für einen Text wie ein read more funktioniert. Genauer gesagt wird die erste Zeile angezeigt und wenn der Client auf das div klickt, wird der vollständige Text angezeigt.

<div class="group-one-row"> 
    <div class="row-header"> 
     <p class="group-regular-header"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
     </p> 
    </div> 
</div> 

$('.row-header').on('click', function() { 
    $(this).parent().find('p').slideToggle(); 
}); 

Mit diesem Code kann ich den vollständigen Text ein-/ausblenden, aber ich brauche die erste Zeile, die immer angezeigt wird.

Answer 1

Meiner Meinung nach sollten Sie nicht .slideToggle() in diesem Fall verwendet werden. Versuchen Sie, einen einzelnen Wrapper um die Tags <p> zu legen und setzen Sie die max-height dieses Wrappers auf die gleiche Höhe wie die Zeilenhöhe einer einzelnen Zeile. Dann überfließe und animiere die max-height auf 1000px (oder berechne die Gesamthöhe mit JavaScript)

Answer 2

Geben Sie jeder Zeile eine eindeutige ID und stellen Sie dann sicher, dass Sie entweder in ein div umschalten, das nicht die erste Zeile ist, oder in der ersten Zeile, falls es nicht bereits sichtbar ist.

$('.row-header').on('click', function() { 

    var p = $(this).parent().find('p'); 

    if($(p).attr('id') != 'idOfTheFirstRow' && $('p').is(':visible')) 
     $(p).slideToggle(); 
});