How to Collapse Text in Joomla 4

When do you need to collapse text in Joomla 4?

Joomla 4 version is integrated with Bootstrap 5 allowing you to build a responsive website effectively. One of the most outstanding features of it is collapsing text. This feature will be useful if you need to display long and detailed content but don’t want the showcase directly because it will confuse the reader with too many words, especially when they are accessing your site on their smartphones. Therefore, you need to generate a content with collapsing text feature. That means you will use a button or link to hide a large text. So, this makes the text become shorter as well as clearer and the visitors can easily read the full content by clicking on the button or link. For example, it’s necessary for you to offer the visitors a long policy script containing a lot of legal terminologies. However, you need to hide it so that the visitors can just read it whenever they want. In the blog today, we would like to guide you to collapse text in Joomla 4. Let’s get started now!

How to collapse text in Joomla 4

First of all, you need to log in to your admin dashboard. After that, simply go to Content -> Articles, then add a new article or select an available one to edit.

Now, fill out the title first, then choose the Published status and select the category.

Next, at the bottom of the editor box, you just need to press the Toggle Editor button. In the article text, it’s time for you to paste the following code:

<p> <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Enter your text here. </div> </div>

After that, you can insert the text you want to display in the “Enter your text here” part. Don’t forget to save it when you finish.

Furthermore, if you just need to use only the button, let’s remove the link portion of the code. It will become:

<div id="collapseExample" class="collapse"> <div class="card card-body">Enter your text here.</div> </div>

On the other hand, in case you just want to use a link, simply add the code below:

<p><a role="button" href="#collapseExample" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseExample"> Link with href </a></p> <div id="collapseExample" class="collapse"> <div class="card card-body">Enter your text here.</div> </div>

Let’s check out the result on your site. You will see the Link with href and the Button with data-bs-target.

When you click on it, the collapsed text will appear with full content for you to read.

Conclusion

To sum up, we have already shared with you some simple steps to collapse text in Joomla 4. Thus, we believe that you can do it without any trouble. If you want to get more information about the topic, don’t hesitate to leave your comment below. Last but not least, don’t forget to visit our site and take a look at many responsive Joomla 4 Templates here. Hope you enjoy it!