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

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.
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(https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png);      }      .two {        background: url(https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png);      }      .three {        background: url(https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png);      }      .four {        background: url(https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210301162100/jquery.png);      }              /* 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:
CSS-Questions
HTML-Questions
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.