Toggle Profile Card Info using JavaScript - Coding Torque

byPiyush Patil -June 26, 2022

0

Toggle profile card info using JavaScript

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 🚀.

Let's cover the HTML part

HTML is a markup language. We use HTML to make the skeleton of a website.

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.

<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.

<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 x @codingtorque</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;
}

.profile_card {
    height: 20rem;
    width: 15rem;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.profile_card img {
    width: 100%;
}

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

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

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

.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.

let toggleBtn = document.getElementById("toggleBtn");
let info = document.getElementById("info");

let toggle = false;

toggleBtn.addEventListener("click", () => {
    if (toggle) {
        info.style = `transform: translateY(8rem);`;
        toggleBtn.innerHTML = ``
        toggle = false;
    } else {
        info.style = `transform: translateY(0rem);`;
        toggleBtn.innerHTML = ``
        toggle = true;
    }
})

Final Output

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubt or any project ideas feel free to Contact Us

Hope you find this post helpful💖

Written by: Coding Torque | Piyush Patil

Follow us on Instagram for more projects like this👨‍💻

- @code.scientist

- @codingtorque

- @codingknights

Toggle Profile Card Info using JavaScript - Coding Torque

Toggle profile card info using JavaScript

Let's cover the HTML part

Here is the Final HTML Code

Output Till Now

Let's understand CSS Part

Output Till Now

Finally a JavaScript Part

Final Output

Post a Comment

Contact form