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=
<link rel="stylesheet"
href=
<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=
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');
}); |
Output: