Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 05 Mar, 2021

In this article, we will see how we can create an expanding card that displays an expanded view of the card on click. For creating this card we will use HTML, CSS, and JavaScript.

Approach: In this section, we will create the structure of our HTML card.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Create a div with the class container.
  • Create another div inside a container with the class section and active.
  • Style the div panel with a background image of your choice.
  • Make another four div with the same class section.

HTML:

HTML






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

CSS: In this section, we will assign general properties to the element using CSS.

CSS




/* Setting container to flex and width to 80% of view port */
.container{
    display: flex;
    width: 80%;
}
/*Adding background image to each section*/
.one{
    background: url(img/one.jpg);
}
.two{
    background: url(img/two.jpg);
}
.three{
    background: url(img/three.jpg);
}
.four{
    background: url(img/four.jpg);
}
/* Background properties and transition effect to section  */
.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 with active class will grow flex to 3 times  */
.section.active{
    flex: 3;
}

JavaScript: Add the click functionality to each card using JavaScript. The querySelectorAll() method is used to return a collection of child elements with the class section. The addEventListener() method is used to handle the click event for each card section.

Javascript




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

Complete Code: 

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <style>
        
      /* Setting container to flex and 
         width to 80% of view port */
      .container {
        display: flex;
        width: 80%;
      }
      /*Adding background image to each section*/
      .one {
        background: url(
      }
      .two {
        background: url(
      }
      .three {
        background: url(
      }
      .four {
        background: url(
      }
        
      /* Background properties and 
         transition effect to section */
      .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 with active class will
         grow flex to 3 times */
      .section.active {
        flex: 3;
      }
    </style>
    <title>Expanding Cards</title>
  </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>
        
      // selecting all sections with class of section
      const sections = document.querySelectorAll(".section");
  
      // Foreach section when clicked
      sections.forEach((section) => {
        section.addEventListener("click", () => {
            
          // remove active class from all another section and
          // add it to the selected section
          sections.forEach((section) => {
            section.classList.remove("active");
          });
          section.classList.add("active");
        });
      });
    </script>
  </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!