Reading this tutorial, you will learn how to design an expanding card using HTML, CSS, and JavaScript. If you know even the basics of HTML and CSS, you can design card expansion animation quite easily.

I’ll walk you through creating an expandable card on click and implementing it in your project in this tutorial. I have already provided numerous more card tutorials, such as animated, business, and profile cards. We can assist you with building a website if you’re seeking a reputable web design firm to do it for you.

I have expanding cards that are animated with JavaScript. To create it, I utilized a small amount of JavaScript. This expandable card html can be used on your website as a picture gallery.

This is how I’ve arranged the cards such that they are generally small and side by side. That card will enlarge when you click on it. In other words, it’s a click-to-expand JavaScript card.

Other Projects:

Expanding Card with CSS

With good reason, expandable cards are a common user interface feature in contemporary web design. They offer a visually appealing and engaging means of showcasing extra data, like product specifications, pictures, and customer testimonials.

We will look at using HTML, CSS, and JavaScript to build expanding cards in this tutorial.

See the Pen Expanding Cards by Ground Tutorial (@groundtutorial) on CodePen.

Now, use the instructions below to make this HTML Expanding Cards Example. I’ve included every line of the source code here, along with an explanation.

I started by using HTML to develop the fundamental structure of this project (How to create Expanding Cards using HTML, CSS), and then I added additional information, such as text and photographs. then used CSS to create an expanding card that resembled an accordion. In the end, I used JavaScript to implement this expanding card technique using CSS.

Step 1: Click to expand the card HTML

This project, an accordion-like expanding card with JavaScript, has a basic framework that I made using my own HTML codes. I combined all of the html here. There’s no need to take it step by step because this project is rather straightforward. You can easily make this expanding cards js if you know the basics of HTML.

HTML For Expanding Card

<div class="container">
  <div
    class="panel active"
    style="background-image: url('img1');">
    <h3>Explore the world</h3>
  </div>
  <div
    class="panel"
    style="background-image: url('img2');">
    <h3>Explore the world</h3>
  </div>
  <div
    class="panel"
    style="background-image: url('img3');">
    <h3>Explore the world</h3>
  </div>
  <div
    class="panel"
    style="background-image: url('img4');">
    <h3>Explore the world</h3>
  </div>
  <div
   <div
    class="panel"
    style="background-image: url('img5');">
    <h3>Explore the world</h3>
  </div>
</div>

Step 2: Using CSS to Expand Cards

It’s time to use CSS to build these expanding cards now. I designed this using very minimal CSS. For this expanding card, I started by adding some fundamental CSF.

Next, I designed the image using some CSS here. Finally, I made Card Collapsible responsive by adding more CSS.

* {
  box-sizing: border-box;
}

body {
  font-family: "Muli", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: flex 0.7s ease-in;
  -webkit-transition: all 700ms ease-in;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

Step 3: Extend JavaScript Code on Cards

It’s time to put this JavaScript-based CSS Expand Cards Design into practice. Here, I’ve explained everything rather well with very little javascript. The code is shown below, along with a detailed explanation.

const panels = document.querySelectorAll(".panel");

panels.forEach((panel) => {
  panel.addEventListener("click", () => {
    removeActiveClasses();
    panel.classList.add("active");
  });
});

const removeActiveClasses = () => {
  panels.forEach((panel) => {
    panel.classList.remove("active");
  });
};

The querySelectorAll function in JavaScript is used to pick every element with the class .panel . An event listener is added to each panel to monitor click events. Upon clicking the panel, the active class is added to the clicked panel after the removeActiveClasses function has eliminated it from all panels.

The removeActiveClasses function iterates through all panels, removing the active class from each one using a forEach loop. With the help of this feature, just one panel can be extended at once.

Once this code is in place, clicking on a panel will cause it to expand along with any other enlarged panels. For displaying more information, this offers a tidy and intuitive interface.

Conclusion

With the help of the javascript above, maybe you were able to make this CSS & JS Expanding Card. If you have any issues, please leave a comment for me. The button below contains all of the HTML and CSS coding for this expanding card.

Categorized in:

HTML Projects,

Last Update: December 31, 2023