NeuroAgent

How to Create an Interactive Button on Tilda: Complete Guide

Learn how to create an interactive button on Tilda with description on click. Complete guide with code, appearance customization, and optimization for better user experience.

#css-styles#interactive-elements#javascript-tilda#tilda-buttons#tilda-optimization#web-development#zero-block
Question

How do I create an interactive button on Tilda that shows a description when clicked? For example, when clicking the ‘Production’ button, a description should appear with photos, information about employees for that industry, and prices.

NeuroAgent

Creating an Interactive Button on Tilda That Shows Description on Click

To create an interactive button on Tilda that shows a description when clicked, you need to use a combination of HTML, CSS, and JavaScript. There are several ways to implement this functionality: using standard Tilda blocks, Zero Block, or with ready-made modifications.

Table of Contents

Main Implementation Methods

There are three main ways to create interactive buttons in Tilda:

  1. Standard Tilda Blocks - using ready-made blocks with additional settings
  2. Zero Block - creating completely custom blocks from scratch
  3. Modifications and Libraries - using ready-made solutions from developers

Each method has its advantages and features, which we will examine in more detail below.

Creating Through Standard Tilda Blocks

Step 1: Adding a Button

  1. Go to the “Blocks” section and select the “Button” category
  2. Add a BF703 button block or similar
  3. Set the button text to “Production”

Step 2: Creating Content to Display

  1. Add blocks with the information you want to show:
    • A block with photos
    • A block with staff descriptions
    • A block with prices
  2. Group these blocks into one common container

Step 3: Setting Up CSS to Hide Content

css
/* Style for hiding content by default */
.production-content {
    display: none;
    transition: all 0.3s ease;
}

.production-content.show {
    display: block;
}

Step 4: Adding JavaScript

javascript
// Script for toggling content visibility
document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector('.t-btn[data-field="button"]');
    const content = document.querySelector('.production-content');
    
    if (button && content) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            content.classList.toggle('show');
        });
    }
});

Using Zero Block for Customization

Zero Block provides more opportunities for creating interactive elements:

Step 1: Creating a Zero Block

  1. Create a new Zero Block or open an existing one
  2. Add a button with the text “Production”
  3. Customize its appearance

Step 2: Adding Content

  1. Place all necessary elements in the Zero Block:
    • Images
    • Staff description text
    • Price table
  2. Set the initial state of the content to “Hidden”

Step 3: Setting Up Animations

  1. Select the content block
  2. In the animation settings, choose the “Appearance” type
  3. Configure animation parameters (speed, effect)

Step 4: Connecting Button and Content

javascript
// Code for Zero Block
$(document).ready(function() {
    // ID of button and content block
    const buttonId = '#rec123456789';
    const contentId = '#rec987654321';
    
    // Click handler for button
    $(buttonId).on('click', function(e) {
        e.preventDefault();
        $(contentId).slideToggle(500);
        t_lazyload_update();
    });
});

Important: When working with Zero Block, use the T1093 modifier from the “Other” category to create popup elements.

Ready-made Solutions and Modifications

There are ready-made libraries of modifications that simplify the creation of interactive buttons:

Nolim Library

Provides ready-made modifications for showing hidden blocks:

html
<!-- Nolim library code -->
<script>
document.addEventListener("DOMContentLoaded", function(){
    let shmoreArr = ['#showmore', 'uc-showmore'];
    let anchor = true; // scroll to anchor
    let hideBtn = false; // hide button on click
    let hideBlk = false; // hide block with button
    
    let shmoreBtn = document.querySelectorAll('[href="'+shmoreArr[0]+'"]');
    let shmoreBlock = document.querySelectorAll('.'+shmoreArr[1]);
    
    shmoreBlock.forEach(i => i.classList.add("tabshi"));
    
    shmoreBtn.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            shmoreBlock.forEach(block => {
                block.classList.toggle("show");
                if (anchor) {
                    block.scrollIntoView({behavior: "smooth"});
                }
            });
        });
    });
});
</script>

TiCode Library

Specially adapted for Tilda:

html
<!-- TiCode library code -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const TiCodeButtonShow = ['#ti-show', '#rec584999865'];
    const TiCodeBlockVisible = false;
    const TiCodeHideButton = false;
    
    const TCshowButtons = document.querySelectorAll(`[href="${TiCodeButtonShow[0]}"]`);
    const TCshowBlocks = TiCodeButtonShow[1].replace(/#/g, '').split(',').map(id => document.getElementById(id));
    
    TCshowBlocks.forEach(block => {
        block.style.transition = "max-height 0.5s ease-in-out, opacity 0.3s ease-in-out";
        if (!TiCodeBlockVisible) {
            block.style.maxHeight = '0px';
            block.style.opacity = '0';
            block.style.overflow = 'hidden';
        }
    });
    
    TCshowButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            TCshowBlocks.forEach(block => {
                if (block.style.maxHeight === '0px' || block.style.maxHeight === '') {
                    block.style.maxHeight = block.scrollHeight + 'px';
                    block.style.opacity = '1';
                } else {
                    block.style.maxHeight = '0px';
                    block.style.opacity = '0';
                }
            });
        });
    });
});
</script>

Example Code for “Production” Button

Here is a complete example of implementing a “Production” button with content display:

HTML Structure:

html
<!-- Button -->
<a href="#production-content" class="production-btn">Production</a>

<!-- Content to display -->
<div id="production-content" class="production-content">
    <div class="production-grid">
        <!-- Photos -->
        <div class="production-images">
            <img src="photo1.jpg" alt="Production process">
            <img src="photo2.jpg" alt="Equipment">
        </div>
        
        <!-- Staff description -->
        <div class="production-staff">
            <h3>Our Specialists</h3>
            <p>Experienced engineers and technologists with over 10 years of experience in the industry.</p>
            <ul>
                <li>25 qualified specialists</li>
                <li>5 process engineers</li>
                <li>10 machine operators</li>
            </ul>
        </div>
        
        <!-- Prices -->
        <div class="production-prices">
            <h3>Services and Prices</h3>
            <table>
                <tr>
                    <th>Service</th>
                    <th>Cost</th>
                    <th>Timeline</th>
                </tr>
                <tr>
                    <td>Machining</td>
                    <td>from 1500 ₽/hour</td>
                    <td>from 3 days</td>
                </tr>
                <tr>
                    <td>Welding works</td>
                    <td>from 1200 ₽/hour</td>
                    <td>from 1 day</td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS Styles:

css
.production-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.production-btn:hover {
    background-color: #0056b3;
}

.production-content {
    display: none;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.production-content.show {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

.production-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.production-images {
    grid-column: 1 / -1;
}

.production-images img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

.production-staff, .production-prices {
    background: white;
    padding: 15px;
    border-radius: 5px;
}

.production-prices table {
    width: 100%;
    border-collapse: collapse;
}

.production-prices th, .production-prices td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

JavaScript:

javascript
document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector('.production-btn');
    const content = document.querySelector('#production-content');
    
    if (button && content) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Toggle content visibility
            content.classList.toggle('show');
            
            // Change button text
            if (content.classList.contains('show')) {
                button.textContent = 'Hide Description';
            } else {
                button.textContent = 'Production';
            }
            
            // Update lazy loading of images
            if (typeof t_lazyload_update === 'function') {
                t_lazyload_update();
            }
        });
    }
});

Setting Up the Appearance

Responsive Design

css
/* Responsive grid for mobile devices */
@media (max-width: 768px) {
    .production-grid {
        grid-template-columns: 1fr;
    }
    
    .production-images img {
        height: 150px;
    }
}

Appearance Animations

css
/* Various animation effects */
.slide-down {
    animation: slideDown 0.5s ease-out;
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

.zoom-in {
    animation: zoomIn 0.4s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

Optimization Recommendations

  1. Performance: Use t_lazyload_update() for correct image loading
  2. Accessibility: Add ARIA attributes to improve accessibility
  3. SEO: Optimize content for search engines
  4. Testing: Test functionality on different devices and browsers

Optimized JavaScript with Accessibility in Mind:

javascript
document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector('.production-btn');
    const content = document.querySelector('#production-content');
    
    if (button && content) {
        // Set initial state for screen readers
        content.setAttribute('aria-hidden', 'true');
        button.setAttribute('aria-expanded', 'false');
        
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            const isExpanded = button.getAttribute('aria-expanded') === 'true';
            
            // Toggle visibility
            content.classList.toggle('show');
            content.setAttribute('aria-hidden', isExpanded ? 'true' : 'false');
            button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
            
            // Change button text
            button.textContent = isExpanded ? 'Production' : 'Hide Description';
            
            // Update lazy loading
            if (typeof t_lazyload_update === 'function') {
                t_lazyload_update();
            }
        });
    }
});

Sources

  1. How to add a button? - Tilda Questions and Answers
  2. How to add and customize a button in Tilda | NAJES
  3. How to make hidden blocks show on click on any Tilda button: Tilda modification by Nolim
  4. Showing and hiding blocks on button click in Tilda| TiCode
  5. Zero Block: creating custom blocks
  6. How to create a “Show More” button in Tilda Zero Block
  7. Showing hidden block on Tilda. Hiding and showing block on Tilda
  8. Tilda modifications. Showing hidden block on button click in Tilda

Conclusion

Creating an interactive button on Tilda that shows a description when clicked is quite achievable through several methods:

  1. For beginners - use standard Tilda blocks with basic JavaScript
  2. For advanced users - apply Zero Block for full customization
  3. For quick results - use ready-made modification libraries

Key points for successful implementation:

  • Properly organize your HTML structure
  • Set up CSS for animations and responsiveness
  • Use modern JavaScript with accessibility in mind
  • Test the result on different devices

Choose the method that best matches your skills and project requirements. All the proposed solutions work stably and can be adapted to your needs.

How to add content appearance animation when clicking a button in Tilda?How to create multiple interactive buttons with different content on one Tilda page?How to optimize performance of interactive buttons on Tilda for mobile devices?How to create a dropdown menu with service descriptions on Tilda using Zero Block?How to add icons to interactive buttons in Tilda and customize their appearance?How to make descriptions smoothly appear and disappear when clicking a button in Tilda?
Ask NeuroAgent