I have been a fan of the jQuery library for quite a few years and still love it. But as much better and lighter javascript libraries come, considering jQuery as my primary frontend library doesn’t make much sense anymore.
So, I have decided to make the transition to Alpine.js, which seems to be a super lightweight and yet very powerful replacement for me.
I am beginning my transition with very small features. This post is about one such small but very frequently needed feature, the feature to show more content on a button click.
Show More Hidden Content on Button Click
The code is very simple.
To start with, we begin by adding alpine.js to our HTML page’s <head> section.
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>The logic behind remains the same: we grab the full text and hide it and then, based on a predefined lengthy, we slice the full text and show just the sliced text. To the end, we show a Show More button.
On clicking this button, we unhide/show the full text and hide the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POC To Show How We can Show/Hide More Content of a div on click using alipne.js</title>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div class="content">
<div x-data="{ open: false, maxLength: 20, fullText: '', slicedText: '' }"
x-init="fullText = $el.firstElementChild.textContent.trim(); slicedText = fullText.slice(0, maxLength)" >
<div x-text="open ? fullText : slicedText" x-transition>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum ullam fugiat iure, minima excepturi culpa,
quidem labore quisquam accusantium dolorem perferendis ex distinctio iusto sint asperiores optio, quae tempora? Illo.
</div>
<button @click="open = true; event.target.style.display='none';" x-text="'Show more'"></button>
<!-- Comment the button above and uncomment the button below to enable toggle feature instead of just show more -->
<!-- <button
@click="open = ! open"
x-text="open ? 'Show less' : 'Show more'"
></button> -->
</div>
</div>
</body>
</html>**With a very small change, we can change the functionality of the button to Toggle the content instead of just showing it. You can download the code from here.
3 thoughts on “How To ‘Show More’ content on Button Click using Alpine.js”
Pingback: How To Make a Google Chrome Extension In Under 15 - Minutes? - Rajiv Verma
How to trim word instead of characters.
You can break a line of string into words based on a pattern but trim is always done by characters.