Create a Toggle Profile Card Details using HTML CSS and JavaScript

Last Updated : 20 Nov, 2023

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>feedback@geeksforgeeks.org 
              </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'); 
}); 