How to create Expanding Cards using HTML, CSS and Javascript ? (original) (raw)

Last Updated : 18 Apr, 2025

Creating expanding cards using HTML, CSS, and JavaScript involves creating a set of cards that expand when clicked.

**Approach

1. **Selection of Sections:
   • The code starts by selecting all HTML elements with the class 'section' using the document.querySelectorAll('.section') method.
   • This creates a NodeList containing all elements with the specified class.
2. **Event Listener for Each Section:
   • A forEach the loop is used to iterate over each section in the NodeList (sections).
   • For each section, an event listener for the 'click' event is added.
3. **Removing 'active' Class from Other Sections:
   • Inside the click event handler, another forEach the loop is used to iterate over all sections (sections).
   • For each section in this loop, the 'active' class is removed using section.classList.remove('active').
4. **Adding 'active' Class to the Clicked Section:
   • After removing the 'active' class from all sections, the 'active' class is added to the currently clicked section using section.classList.add('active').

**Example: We are following the above-explained approach.

HTML `

`

**Output