How to create Expanding Cards using HTML, CSS, and JavaScript

In this tutorial, we will learn how to create Expanding Cards using HTML, CSS and JavaScript. We will also learn how to use some additional CSS properties to make our expanding cards more attractive.

What are Expanding Cards?

Expanding cards are a type of card that can be expanded to reveal more content. They are commonly used to display additional

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

To create expanding cards, we will need to use the following HTML elements−

  • The card container element: This will be the element that will contain all of our cards. We will give this element an id of "expanding−cards".

  • The card element: This will be the element that contains the content for each individual card. We will give this element a class of "card".

  • The card header element: This will be the element that contains the header for each card. We will give this element a class of "card−header".

  • The card body element: This will be the element that contains the body content for each card. We will give this element a class of "card−body".

  • The card footer element: This will be the element that contains the footer for each card. We will give this element a class of "card−footer".

The CSS

Now that we have our HTML set up, let's style our cards using CSS.

First, we will set some basic styles for our card container− 

#expanding-cards { 
   width: 100%; 
   max-width: 960px;
   margin: 0 auto;
}

Next, we will style our individual cards− 

.card { 
   width: 100%; 
   border: 1px solid #ccc; 
   border-radius: 4px; 
   overflow: hidden; 
}

Now, let's style our card headers− 

.card-header { 
   padding: 15px; 
   background-color: #f5f5f5; 
   border-bottom: 1px solid #ccc; 
}
.card-header h3 {
   margin: 0; 
   font-size: 16px; 
}

Our card bodies will have a bit more going on− 

.card-body {
   padding: 15px; 
}
.card-body p { 
   margin: 0; 
   font-size: 14px; 
   line-height: 1.5; 
}

And finally, our card footers− 

.card-footer { 
   padding: 15px; 
   background-color: #f5f5f5;
   border-top: 1px solid #ccc; 
}

The JavaScript

Now that our HTML and CSS are set up, let's write some JavaScript to make our cards expand and collapse on click.

First, we will need to select our card elements− 

var cards = document.querySelectorAll('.card');

Next, we will create a function that will toggle the expanded class on our cards− 

function toggleExpanded() { 
   this.classList.toggle('expanded'); 
}

Finally, we will loop through our card elements and add an event listener for the click event− 

for(var i = 0; i < cards.length; i++) { 
   cards[i].addEventListener('click', toggleExpanded);
}

And that's it! Now when you click on a card, it will expand to reveal more content.

Additional CSS

If you want to take your expanding cards to the next level, you can try adding some additional CSS

First, let's add some transitions to make our cards expand and collapse smoothly− 

.card { 
   transition: all 0.3s ease-out; 
}
.card.expanded { 
   transform: scale(1.1);
}

Next, let's add a hover state to our cards

.card:hover { 
   box-shadow: 0px 0px 10px rgba(0,0,0,0.3); 
   cursor: pointer; 
}

And finally, let's add some media queries so our cards look good on mobile devices− 

@media (max-width: 768px) { 
   .card {
      width: 100%; 
   }
}

Full Working Code

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      #expanding-cards {
         width: 100%;
         max-width: 960px;
         margin: 0 auto;
      }
      .card {
         width: 100%;
         border: 1px solid #ccc;
         border-radius: 4px;
         overflow: hidden;
         transition: all 0.3s ease-out;
      }
      .card.expanded {
         transform: scale(1.1);
      }
      .card:hover {
         box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
         cursor: pointer;
      }
      .card-header {
         padding: 15px;
         background-color: #f5f5f5;
         border-bottom: 1px solid #ccc;
      }
      .card-header h3 {
         margin: 0;
         font-size: 16px;
      }
      .card-body {
         padding: 15px;
      }
      .card-body p {
         margin: 0;
         font-size: 14px;
         line-height: 1.5;
      }
      .card-footer {
         padding: 15px;
         background-color: #f5f5f5;
         border-top: 1px solid #ccc;
      }
      @media (max-width: 768px) {
         .card {
         width: 100%;
      }
   }
   </style>
</head>
<body>
   <div><h3> Click anywherer on the cart to see the expanding effect</h3></div>
   <div id="expanding-cards">
   <div class="card">
   <div class="card-header">
   <h3>Card 1</h3>
   </div>
   <div class="card-body">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
   </div>
   <div class="card-footer">
   <a href="#">Read More</a>
   </div>
   </div>
   <div class="card">
   <div class="card-header">
   <h3>Card 2</h3>
   </div>
   <div class="card-body">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
   </div>
   <div class="card-footer">
   <a href="#">Read More</a>
   </div>
   </div>
   <div class="card">
   <div class="card-header">
   <h3>Card 3</h3>
   </div>
   <div class="card-body">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
   </div>
   <div class="card-footer">
   <a href="#">Read More</a>
   </div>
   </div>
   </div>
   <script>
      var cards = document.querySelectorAll('.card');
      function toggleExpanded() {
         this.classList.toggle('expanded');
      }
      for(var i = 0; i < cards.length; i++) {
         cards[i].addEventListener('click', toggleExpanded);
      }
   </script>
</body>
</html>

Updated on: 14-Sep-2022

2K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements