Open In App

How to create Expanding Cards using HTML, CSS and Javascript ?

Last Updated : 30 Jan, 2024
Like Article

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


  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 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 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 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.


// Selecting all sections with class of section
const sections = document.querySelectorAll('.section')
// On click event for each section
    // remove active class from all another section
    // and add it to the selected section
        sections.forEach((section) => {


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Expanding Cards</title>
    <!-- Container -->
    <div class="container">
      <!-- Div with section and active -->
      <div class="section one active"></div>
      <!-- All another div with section -->
      <div class="section two"></div>
      <div class="section three"></div>
      <div class="section four"></div>


/* Setting container to flex and width to 80% of view port */
    display: flex;
    width: 80%;
/*Adding background image to each section*/
    background: url(img/one.jpg);
    background: url(img/two.jpg);
    background: url(img/three.jpg);
    background: url(img/four.jpg);
/* Background properties and transition effect to section  */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    cursor: pointer;
    flex: 0.2;
    position: relative;
    transition: all 0.7s ease-out;
/* section with active class will grow flex to 3 times  */{
    flex: 3;

Output: Click here to see live code output

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads