Collapsible Web App Design with JavaScript, HTML, and CSS

In modern web development, creating interactive and user-friendly web applications is crucial. Collapsible elements are a popular feature that can enhance the user experience by allowing users to hide or show content as needed. This not only saves screen space but also provides a more organized view of the information. In this blog, we will explore how to design collapsible web app components using JavaScript, HTML, and CSS.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Code Examples
  6. Conclusion
  7. References

Fundamental Concepts#

HTML#

HTML is responsible for the structure of the web page. To create a collapsible element, we typically use a button or a heading to trigger the collapse and a container to hold the collapsible content. For example, we can use a <button> element to toggle the visibility of a <div> element.

CSS#

CSS is used to style the collapsible elements. We can control the visibility, height, and transition effects of the collapsible content. The display property can be used to show or hide the content, and the transition property can create smooth animation effects when the content is expanded or collapsed.

JavaScript#

JavaScript is used to handle the interactivity of the collapsible elements. We need to add event listeners to the trigger element (e.g., the button) and update the CSS properties of the collapsible content when the event is triggered.

Usage Methods#

Step 1: Create the HTML Structure#

First, we need to create the basic HTML structure for the collapsible element. Here is a simple example:

<button id="toggleButton">Toggle Content</button>
<div id="collapsibleContent">
    <p>This is the collapsible content.</p>
</div>

Step 2: Style the Elements with CSS#

Next, we use CSS to style the elements and initially hide the collapsible content.

#collapsibleContent {
    display: none;
    transition: all 0.3s ease;
}

Step 3: Add Interactivity with JavaScript#

Finally, we use JavaScript to add interactivity to the button. When the button is clicked, we toggle the visibility of the collapsible content.

const toggleButton = document.getElementById('toggleButton');
const collapsibleContent = document.getElementById('collapsibleContent');
 
toggleButton.addEventListener('click', function() {
    if (collapsibleContent.style.display === 'none') {
        collapsibleContent.style.display = 'block';
    } else {
        collapsibleContent.style.display = 'none';
    }
});

Common Practices#

Multiple Collapsible Elements#

In many cases, we may need to have multiple collapsible elements on a single page. We can use a more generic approach by using classes instead of IDs.

<button class="toggleButton">Toggle Content 1</button>
<div class="collapsibleContent">
    <p>Content 1</p>
</div>
<button class="toggleButton">Toggle Content 2</button>
<div class="collapsibleContent">
    <p>Content 2</p>
</div>
.collapsibleContent {
    display: none;
    transition: all 0.3s ease;
}
const toggleButtons = document.querySelectorAll('.toggleButton');
toggleButtons.forEach(function(button) {
    button.addEventListener('click', function() {
        const content = this.nextElementSibling;
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    });
});

Accordion Style#

An accordion is a common type of collapsible design where only one section can be open at a time.

<div class="accordion">
    <button class="accordionButton">Section 1</button>
    <div class="accordionContent">
        <p>Section 1 content</p>
    </div>
    <button class="accordionButton">Section 2</button>
    <div class="accordionContent">
        <p>Section 2 content</p>
    </div>
</div>
.accordionContent {
    display: none;
    transition: all 0.3s ease;
}
const accordionButtons = document.querySelectorAll('.accordionButton');
accordionButtons.forEach(function(button) {
    button.addEventListener('click', function() {
        const content = this.nextElementSibling;
        const allContents = document.querySelectorAll('.accordionContent');
        allContents.forEach(function(c) {
            if (c!== content) {
                c.style.display = 'none';
            }
        });
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    });
});

Best Practices#

Accessibility#

  • Use semantic HTML elements such as <button> for the trigger. Screen readers can better understand the purpose of the element.
  • Add appropriate ARIA (Accessible Rich Internet Applications) attributes. For example, we can add aria-expanded to the button to indicate whether the content is expanded or collapsed.
<button id="toggleButton" aria-expanded="false">Toggle Content</button>
<div id="collapsibleContent" aria-hidden="true">
    <p>This is the collapsible content.</p>
</div>
const toggleButton = document.getElementById('toggleButton');
const collapsibleContent = document.getElementById('collapsibleContent');
 
toggleButton.addEventListener('click', function() {
    const isExpanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded',!isExpanded);
    collapsibleContent.setAttribute('aria-hidden', isExpanded);
    if (isExpanded) {
        collapsibleContent.style.display = 'none';
    } else {
        collapsibleContent.style.display = 'block';
    }
});

Performance#

  • Minimize the use of JavaScript for simple animations. CSS transitions are generally more performant than JavaScript-based animations.
  • Avoid unnecessary DOM manipulations. For example, instead of constantly changing the display property, we can use max - height and overflow properties to create a smooth collapse effect.
.collapsibleContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
const toggleButton = document.getElementById('toggleButton');
const collapsibleContent = document.getElementById('collapsibleContent');
 
toggleButton.addEventListener('click', function() {
    if (collapsibleContent.style.maxHeight === '0px' || collapsibleContent.style.maxHeight === '') {
        collapsibleContent.style.maxHeight = collapsibleContent.scrollHeight + 'px';
    } else {
        collapsibleContent.style.maxHeight = '0px';
    }
});

Code Examples#

Full Example with Accessibility and Performance Considerations#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale=1.0">
    <style>
        button {
            cursor: pointer;
        }
 
       .collapsibleContent {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
    </style>
</head>
 
<body>
    <button id="toggleButton" aria-expanded="false">Toggle Content</button>
    <div id="collapsibleContent" aria-hidden="true">
        <p>This is the collapsible content.</p>
    </div>
    <script>
        const toggleButton = document.getElementById('toggleButton');
        const collapsibleContent = document.getElementById('collapsibleContent');
 
        toggleButton.addEventListener('click', function () {
            const isExpanded = this.getAttribute('aria-expanded') === 'true';
            this.setAttribute('aria-expanded',!isExpanded);
            collapsibleContent.setAttribute('aria-hidden', isExpanded);
            if (isExpanded) {
                collapsibleContent.style.maxHeight = '0px';
            } else {
                collapsibleContent.style.maxHeight = collapsibleContent.scrollHeight + 'px';
            }
        });
    </script>
</body>
 
</html>

Conclusion#

Collapsible web app design using JavaScript, HTML, and CSS is a powerful technique to enhance the user experience. By understanding the fundamental concepts, usage methods, common practices, and best practices, developers can create interactive and accessible collapsible elements. Whether it's a simple toggle or a complex accordion, these techniques can be applied to various web applications.

References#

2025-10