Create a Toggle Profile Card Details using HTML CSS and JavaScript

Last Updated : 23 Jul, 2024

In this article, we will develop an interactive Toggle Profile Card Details application using HTML, CSS, and JavaScript Language. In this application, we have a Card Component with the user's details like their profile picture and Name. There is a toggle button, and when the button is clicked, the detailed information of the user will be displayed for example Email, Address, Interest, and Social Media Links.

Preview

Prerequisites

Approach

Create the HTML structure by using the HTML tags. We have used h1 to represent the GeeksforGeeks heading and h3 for the Application Name.
Then by using the external CSS CDN link, we have created the toggle icon and social media links.
The entire card component, icons, are been styled using a CSS file. Entire colors, effects, and animations are defined in the CSS file by using properties and classes.
In the JavaScipt Code, firstly we store the reference of HTML elements of toggle-details and the card-details.
We have used the click event listener, to perform the actual toggling effect.

Example: This example illustrates the basic implementation of the Toggle Profile Card Details using HTML CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                    initial-scale=1.0">
    <link rel="stylesheet"
          href="styles.css">
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet"
          href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
    <title>Toggle Profile Card</title>
</head>

<body>
    <header>
        <h1 class="logo">GeeksforGeeks</h1>
        <h3 class="subtitle">
          Toggle Profile Card Details using 
          HTML CSS & JavaScript
          </h3>
    </header>
    <div class="profile-card">
        <div class="card-header">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
                alt="Profile Picture">
            <h2>GeeksforGeeks</h2>
            <div id="toggle-details" 
                 class="toggle-button">
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>
        <div class="card-details">
            <p>
                  <strong>Email:</strong>[email protected]
              </p>
            <p>
                  <strong>Location:</strong> 
                  A-143, 9th Floor, Sovereign Corporate Tower,
                Sector-136, Noida, Uttar Pradesh - 201305
              </p>
            <p>
                  <strong>Interests:</strong> Web Development, Design
              </p>
            <div class="social-icons">
                <a href="#" 
                   class="icon-link">
                      <i class="fab fa-twitter"></i>
                  </a>
                <a href="#" 
                   class="icon-link">
                      <i class="fab fa-facebook"></i>
                  </a>
                <a href="#" 
                   class="icon-link">
                      <i class="fab fa-instagram"></i>
                  </a>
                <a href="#" 
                   class="icon-link">
                      <i class="fab fa-linkedin"></i>
                  </a>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(90deg, #f1a2ff, #caf072);
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    padding: 20px;
    color: #32CD32;
    font-size: 24px;
    font-weight: bold;
}

.logo {
    margin: 0;
    font-size: 36px;
    color: rgb(15, 149, 15);
}

.subtitle {
    margin: 0;
    font-size: 18px;
    color: black;
}

.profile-card {
    background-color: #e6f7ff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    width: 400px;
    text-align: center;
    overflow: hidden;
    animation: fadeIn 1s ease-in-out;
    margin: 20px auto;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    position: relative;
}

.card-header img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 5px solid #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
}

.card-header img:hover {
    transform: scale(1.1);
}

.toggle-button {
    background-color: #ff6f61;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    border-radius: 50%;
}

.toggle-button:hover {
    background-color: #e7453d;
}

.card-details {
    display: none;
    padding: 20px;
    background: linear-gradient(90deg, #ff6f61, #ff7676);
    color: #fff;
}

.card-details p {
    margin: 10px 0;
    font-size: 16px;
}

.show-details {
    display: block;
    animation: slideIn 0.5s forwards;
}

@keyframes slideIn {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.social-icons {
    margin-top: 20px;
}

.icon-link {
    font-size: 24px;
    margin-right: 10px;
    text-decoration: none;
    transition: color 0.3s;
}

.icon-link:nth-child(1) i {
    color: #e4405f;
}

.icon-link:nth-child(2) i {
    color: #1da1f2;
}

.icon-link:nth-child(3) i {
    color: #1877f2;
}

.icon-link:nth-child(4) i {
    color: #0077b5;
}

.icon-link:hover {
    color: #ff6f61;
}

JavaScript

const tBtn = document.getElementById('toggle-details');
const profileDetails = document.querySelector('.card-details');
tBtn.addEventListener('click', () => {
    profileDetails.classList.toggle('show-details');
    tBtn.querySelector('i').classList.toggle('fa-chevron-down');
    tBtn.querySelector('i').classList.toggle('fa-chevron-up');
});

Output:

Creating a Personalized Greeting Card with HTML CSS and JavaScript

gauravggeeksforgeeks

Improve

Article Tags :

Create a Toggle Profile Card Details using HTML CSS and JavaScript

Preview

Prerequisites

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?