Open In App

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

Last Updated : 18 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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 
<!DOCTYPE html>
<html lang="en">
  <head>
   <style>
       .container{
    display: flex;
    width: 80%;
}
.one{
    background: url(img/one.jpg);
}
.two{
    background: url(img/two.jpg);
}
.three{
    background: url(img/three.jpg);
}
.four{
    background: url(img/four.jpg);
}
.section{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    cursor: pointer;
    flex: 0.2;
    margin:8px;
    position: relative;
    transition: all 0.7s ease-out;
} 
.section.active{
    flex: 3;
}
   </style>
  </head>
  <body>
    <!-- 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>
    </div>
    <script>
        const sections = document.querySelectorAll('.section')
sections.forEach((section)=>{
    section.addEventListener('click',()=>{
        sections.forEach((section) => {
            section.classList.remove('active')
        })
        section.classList.add('active')
    })
}) 
    </script>
  </body>
</html>

Output


N
NANDINIJAIN
Improve
Article Tags :

Explore

Lightbox