Neu Text einklappen Ausklappen

[BlueEyePhoenix]

Hallo Commuity,

ich hab da mal eine Frage zu JQuery Code und Smarty und zwar versuche ich bei den Kategorien den Text mit weiterlesen ein und ausklappen zulassen.
Das klappt auch alles soweit mit dem folgenden code

         <script>
                               $(document).ready(function(){
                                   var maxLength = 300;
                                   $(".show-read-more").each(function(){
                                   var myStr = $(this).text();
                                   if($.trim(myStr).length > maxLength){
                                   var newStr = myStr.substring(0, maxLength);
                                   var removedStr = myStr.substring(maxLength, $(myStr).length);
                                   $(this).empty().html(newStr);
                                   $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
                                   $(this).append(' <span class="more-text">' + removedStr + '</span>');
                                   }
                                   });
                                   $(".read-more").click(function(){
                                   $(this).siblings(".more-text").contents().unwrap();
                                   $(this).remove();
                                  });
                               });
                             </script>

Das Problem ist dabei das das script mir die Formatierung von meinem Text (smartyvarible) entfernt. Quasi mein H überschriften und absätze raus nimmt.
Was muss ich in dem Script anpassen damit er die formatierung des text beibehält.

Hilfes stellung wäre nett.

 

[css-umsetzung]

Was ja auch klar ist auf den ersten Blick, du holst dir den reinen Text ohne Formatierungen, musst du ja auch weil du sonst das Markup zerstören würdest.
Ich finde diesen Ansatz falsch und habe daher meine eigene Methode entwickelt.

Das kannst du hier ganz gut sehen:
https://bit.ly/2mRVeKe

 

[BlueEyePhoenix]

Danke. Sieht echt gut aus, ist das bei dir eine CSS methode?

 

[css-umsetzung]

beides, CSS/JS
ich ändere über JS die Klasse damit es aufklappt und was dazu kommt, mein JS berechnet den benötigten Platz, ist der z.B. unter 120px Höhe, dann lass ich den Text komplett anzeigen.

Der Vorteil bei dieser Variante ist eben das du am Text nichts stückeln musst und nicht Gefahr läufst das du das Markup zerstörst und wenn du eine aufwendigere Beschreibung mit einem grid oder eben gefloateten Elementen hast, würde deine Variante, egal wie du es angehst nicht gehen.

Das verkürzen ist bei mir eine reine overflow:hidden Geschichte.