Hello Guys! In this blog, I'm going to explain to you how to make a Profile Card Info Toggler using JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.
Get Amazing Web Development projects on Coding Torque
Let's cover HTML Part
We use HTML to make the skeleton of a website. HTML is a markup language.
Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
Now let's design our profile card. We will go hierarchically, first we declare a <div> with class 'profile_card' as a name suggests it holds our profile and details. Then we declare an <img> which holds our profile image. Then a <button> tag to toggle the profile details on click.
Next, we declare a <div> tag with the class name 'info' inside the profile_card that holds our profile info. In that we have unordered list of social media icons, <h4> tag for name and <p> tag for profession.
<div class="profile_card">
<img src="../imgs/profile-pic.jpg" alt="profile">
<button id="toggleBtn" class="toggleBtn"><i class="fas fa-arrow-up"></i></button>
<div class="info" id="info">
<ul class="social-icons">
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-github"></i></a>
</li>
</ul>
<h4 class="name">Piyush Patil</h4>
<p class="profession">Web Developer</p>
</div>
</div>
Here is the final HTML code
<!doctype html">
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Toggle Profile Card info - @code.scientist</title>
</head>
<body>
<div class="profile_card">
<img src="../imgs/profile-pic.jpg" alt="profile">
<button id="toggleBtn" class="toggleBtn"><i class="fas fa-arrow-up"></i></button>
<div class="info" id="info">
<ul class="social-icons">
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-github"></i></a>
</li>
</ul>
<h4 class="name">Piyush Patil</h4>
<p class="profession">Web Developer</p>
</div>
</div>
</body>
</html>
Output Till Now
Let's understand CSS part
In the below CSS code. I am going to explain to you each and every style of a particular class.
- For the div with class 'profile_card' we have set the height and width property, along with that it has border-radius property to have curve edges.
- Next we set the width of an image to 100% of profile_card width.
- Next, we have 'info' div with absolute property, top and bottom 0, and width 100% to the card.
- Next, we have social media icons with hover effects.
- Next, a circular toggle button with a position absolute. we use
border-radius:50%to have a circular shape.
* {
font-family: 'Poppins', sans-serif;
}
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* 1 */
.profile_card {
height: 20rem;
width: 15rem;
border-radius: 15px;
overflow: hidden;
position: relative;
}
/* 2 */
.profile_card img {
width: 100%;
}
/* 3 */
.info {
background: white;
color: black;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 30px;
transition: 0.5s ease;
}
/* 4 */
.social-icons {
display: flex;
align-items: center;
list-style: none;
padding: 0;
position: absolute;
top: -50px;
left: 0;
}
.social-icons li {
margin: 0 10px;
}
.social-icons li a {
background: white;
color: black;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 5px;
}
/* 5 */
.toggleBtn {
position: absolute;
right: 5px;
bottom: 7px;
z-index: 1;
background: black;
color: white;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 50%;
cursor: pointer;
}
/* 6 */
.name {
margin: 0;
padding: 0 10px;
}
.profession {
margin: 0;
padding: 0 10px;
font-size: 12px;
}
Output Till Now
Finally a JavaScript part
In the below javascript code,
- We declared 2 variables that are toggleBtn and info. Then we grab the toggle button and info div using
document.getElementById()function. - Next, we have declared a toggle variable that will hold our toggle state in a boolean format, whether the info is toggled or not.
- Next, we have assigned a click event listener on the toggle button. In that, we have a conditional statement where if the toggle state is true that means the info div is opened so we have to close that by applying styles to the info div, changing the arrow of toggleBtn and at the last change toggle state to false.
// 1
let toggleBtn = document.getElementById("toggleBtn");
let info = document.getElementById("info");
// 2
let toggle = false;
// 3
toggleBtn.addEventListener("click", () => {
if (toggle) {
info.style = `transform: translateY(8rem);`;
toggleBtn.innerHTML = `<i class="fas fa-arrow-up"></i>`
toggle = false;
} else {
info.style = `transform: translateY(0rem);`;
toggleBtn.innerHTML = `<i class="fas fa-arrow-down"></i>`
toggle = true;
}
})
Top comments (0)