From 71ec35a0e59eff219f44ea10f7d11a6607c526ca Mon Sep 17 00:00:00 2001 From: Roene Date: Fri, 17 Apr 2026 14:02:55 +0200 Subject: [PATCH 1/5] Readmore / read less variant with JS --- resources/views/components-preview.blade.php | 24 +++++ .../components/readmore/readmore.blade.php | 97 +++++++++++++------ 2 files changed, 93 insertions(+), 28 deletions(-) diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php index a29f78a5..e557945f 100644 --- a/resources/views/components-preview.blade.php +++ b/resources/views/components-preview.blade.php @@ -370,6 +370,30 @@ +
+
+

Read more / Read less inline variant

+
+ If you want to have the inline variant you can use the variant like the exmaple shown here +
+
+
+

Inline read more / read less

+ + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. + + + + + +
+
+

Prose component

Wayne Enterprises

diff --git a/resources/views/components/readmore/readmore.blade.php b/resources/views/components/readmore/readmore.blade.php index ff85b02d..18ac09f9 100644 --- a/resources/views/components/readmore/readmore.blade.php +++ b/resources/views/components/readmore/readmore.blade.php @@ -1,14 +1,16 @@ {{-- -Read more/less component using the Tailwind CSS `peer` utility. Only used JS for checking if content overflows line-clamp container. +Read more/less component, JS used for checking if content overflows line-clamp container and to show or +hide the more/less buttons. ## Notes - **Clamping** The default of line-clamp-5 is used. -- **Buttons** You can't use