Show More and Show Less Button

This tutorial explains how to create a Show More and Show Less button in Joomla without advanced technical skills...
Learn more
How to create a Show More and Show Less button in Joomla?
This tutorial explains how to create a Show More and Show Less button in Joomla without advanced technical skills. Show More and Show Less button is an interactive content control element that allows you to show or hide content with a click. This functionality is especially useful when you need to place a large amount of information on a page. If you are looking for a way to add a Show More and Show Less button in Joomla, this guide will help you create a flexible and SEO-friendly solution.

A Show More and Show Less button works perfectly for long product descriptions, blog posts, informational pages, FAQ sections, and landing pages. Anywhere you need to collapse content, a Show More and Show Less button becomes an essential tool. This solution is widely used to create expandable sections, hidden content blocks, and dynamic layouts in Joomla websites.

High-quality and detailed content plays a key role in SEO. Search engines prefer pages with more complete and relevant information. At the same time, too much text or too many elements can make a page feel heavy and difficult to read. This is exactly where a Show More and Show Less button becomes the optimal solution. It allows you to hide secondary content while keeping the most important information visible. This approach helps balance SEO requirements and a comfortable user experience.

Creating a Show More and Show Less button in Gridbox is simple and does not require advanced technical skills. This method works without any additional Joomla extensions or plugins, making it a lightweight and efficient solution. You just need to add a Row with the content you want to show or hide, and then add another Row with the Show More and Show Less button. After that, assign the classes, add CSS and JavaScript in the Code Editor to connect the button with the content. As a result, you get a fully working mechanism that toggles your content visibility.

Note that when you create a Show More and Show Less button, you are not limited to text only. Joomla website builder Gridbox gives you full freedom in building a page, so you can use any content type: images, videos, buttons, and other plugins or elements. You can organize content in multi-column rows and also add nested rows. This allows you to create not just a simple button, but a well-designed interactive solution that fits into your page design.

Another important advantage of a Show More and Show Less button is its flexibility. You can easily adapt it to your needs by changing button labels. You can also control how much content is visible in the collapsed state.

Show More and Show Less button is a simple and powerful way to refine page structure, making the design cleaner and improving your SEO performance. Creating a Show More and Show Less button gives you full control over your content and helps you build pages that work equally well for both users and search engines.

Tools

Code editor

Estimated time

5 min.

Adding Class Suffix to a Collapse Item

1. Add the class suffix read-more-content read-more-hidden to any section, row, or nested row that should be collapsed.

Adding Class Suffix to a Button

2. Add a class suffix read-more-button to the button that will open/close the collapsed element.

 

*Important! The button must be placed outside the collapsed section, row, or nested row.

Adding CSS

3. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

 

.page .read-more-content {
    box-sizing: content-box;
    overflow: hidden;
    transition: height 0.5s ease;
}
.page .read-more-hidden {
    height: 100px !important;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

100px visible height when collapsed. Change this value to adjust.

Adding JavaScript

4. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

 


window.addEventListener("load", () => {
    const row = document.querySelector('.read-more-content');
    const btn = document.querySelector('.read-more-button a span');
    if (!row || !btn) return;
    const column = [...row.children].find(el => !el.classList.contains('ba-overlay'));
    const setHeight = () => row.style.height = (column?.scrollHeight || 0) + 'px';
    btn.textContent = "Show more";
    setHeight();
    document.addEventListener('click', e => {
        if (!e.target.closest('.read-more-button a')) return;
        e.preventDefault();
        const hidden = row.classList.toggle('read-more-hidden');
        btn.textContent = hidden ? "Show more" : "Show less";
        setHeight();
    });
});

Replace "Show more" and "Show less" with your own button labels.

Something is not clear? Ask a question on community forums.