Expandable card layout using html, css and js

Expandable cards using html css and js

In this Article, we will learn how to create Expandable cards using html, css and js with source code. Creating Expandable cards using html, css and js becomes simple with the given tutorial, which provides a simple step-by-step process to design Expandable cards using html, css and js. So, let's go and follow the given steps carefully.

Steps to create Expandable cards using html, css and js

Here are the Steps to create Expandable cards using html, css and js as given below :-

1) Creating File on VS CODE :

Open VS Code, Create a new folder to add html, css and js file.

2) Adding HTML :

Add the .html file in the project folder and give it the name as - index.html.

3) Copy and Paste HTML code :

copy the following code and paste it in index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expandable Cards using html, css and js</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="card-header" onclick="toggleCard(this)">HTML</div>
      <div class="card-content">
        <div class="images">
          <img src="html.png" alt="Image 1">
        </div>
        <div class="text">
          <p>HTML</p>
          <p>Hyper text Markup language which is used to provide a structure to the website.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" onclick="toggleCard(this)">CSS</div>
      <div class="card-content">
        <div class="images">
          <img src="css.png" alt="Image 3">
        </div>
        <div class="text">
          <p>CSS</p>
          <p>Cascading style sheet which is used to design a website.</p>
        </div>
      </div>
    </div>
    <div class="card">
        <div class="card-header" onclick="toggleCard(this)">JS</div>
        <div class="card-content">
          <div class="images">
            <img src="js.png" alt="Image 3">
          </div>
          <div class="text">
            <p>JS</p>
            <p>Javascript is used to provide a functionality to the website.</p>
          </div>
        </div>
      </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

4) Adding CSS :

Add the .css file in the project folder and give it the name as - style.css.

5) Copy and Paste CSS code :

copy the following code and paste it in style.css file.

* {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  .container {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    max-width: 800px;
  }
  
  .card {
    width: calc(50% - 10px); /* Adjust for 2 cards per row with gap */
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-5px); /* Lift card slightly on hover */
  }
  
  .card-header {
    background-color: hsl(0, 0%, 89%);
    padding: 12px;
    cursor: pointer;
  }
  
  .card-content {
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  
  .card.active .card-content {
    max-height: 500px;
  }
  
  .images {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  
  .images img {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
  }
  
  .text {
    padding: 12px;
  }

6) Adding Javascript :

Add the .js file in the project folder and give it the name as - script.js.

7) Copy and Paste JS code :

copy the following code and paste it in script.js file.

function toggleCard(cardHeader) {
    const card = cardHeader.parentNode;
    card.classList.toggle('active');
  }

8) Check the Output :

After adding source code to the files, check the output of the project.

Here is the output of Expandable cards :

About the project -

In this code, we used html to create a Expandable cards structure with div tags and given a image and information. we've added a css to given position and designed the div tags and added a toggle with javascript to expand the cards to view them.