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.
<!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>
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;
}
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:
