top of page

Just Jolly Functions

Functions: Showcasing the Team with HTML, CSS, and JavaScript

A Team Showcase is a dynamic and visually engaging tool to display a team or organization's members on a post. It typically highlights key information about the team, such as names, job titles, photos, and sometimes links to social media profiles, email addresses, or personal websites. The widget is usually interactive and responsive, providing users with a clean, organized way to view the team, learn about their roles, and connect with them.



Team Showcase Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Showcase</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
        }

        h1 {
            margin: 0;
        }

        .team-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px;
        }

        .team-member {
            background-color: white;
            border-radius: 8px;
            margin: 15px;
            padding: 20px;
            width: 250px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .team-member:hover {
            transform: scale(1.05);
        }

        .team-member img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        }

        .team-member h3 {
            margin: 10px 0;
            font-size: 1.2em;
        }

        .role {
            color: #555;
            font-size: 1em;
        }

        .description {
            display: none;
            font-size: 0.9em;
            color: #777;
            margin-top: 10px;
        }

        .btn-toggle {
            background-color: #333;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 1em;
            margin-top: 15px;
            border-radius: 5px;
        }

        .btn-toggle:hover {
            background-color: #444;
        }
    </style>
</head>
<body>

    <header>
        <h1>Our Amazing Team</h1>
    </header>

    <div class="team-container">
        <!-- Team Member 1 -->
        <div class="team-member">
            <img src="https://via.placeholder.com/100" alt="Member 1">
            <h3>John Doe</h3>
            <p class="role">Lead Developer</p>
            <p class="description" id="desc1">John is a passionate developer with over 5 years of experience in software development. He loves tackling complex problems and creating elegant solutions.</p>
            <button class="btn-toggle" onclick="toggleDescription('desc1')">More Info</button>
        </div>

        <!-- Team Member 2 -->
        <div class="team-member">
            <img src="https://via.placeholder.com/100" alt="Member 2">
            <h3>Jane Smith</h3>
            <p class="role">Project Manager</p>
            <p class="description" id="desc2">Jane brings organization and leadership to the team, ensuring every project is executed flawlessly and on time. She's an expert communicator and problem solver.</p>
            <button class="btn-toggle" onclick="toggleDescription('desc2')">More Info</button>
        </div>

        <!-- Team Member 3 -->
        <div class="team-member">
            <img src="https://via.placeholder.com/100" alt="Member 3">
            <h3>Sarah Lee</h3>
            <p class="role">UI/UX Designer</p>
            <p class="description" id="desc3">Sarah crafts intuitive and beautiful user experiences, making sure our products are both functional and visually appealing. Her eye for design is unmatched.</p>
            <button class="btn-toggle" onclick="toggleDescription('desc3')">More Info</button>
        </div>
    </div>

    <script>
        // Function to toggle visibility of description
        function toggleDescription(id) {
            var description = document.getElementById(id);
            if (description.style.display === "none" || description.style.display === "") {
                description.style.display = "block";
            } else {
                description.style.display = "none";
            }
        }
    </script>

</body>
</html>

Key Features:

  1. HTML: The structure of the page includes a header, a team showcase section with three team members (you can expand this as needed), and buttons to toggle the visibility of each team member's description.

  2. CSS: Provides a clean and modern look with hover effects and card-like designs for each team member. The design is responsive and adjusts to the screen size.

  3. JavaScript: Simple JavaScript function to toggle the visibility of the team member's description when the "More Info" button is clicked.


Feel free to customize the design and the content as per your requirements!


Explanation:

This code creates a simple Team Showcase webpage using HTML, CSS, and JavaScript. The post page displays a list of team members, their roles, and an option to reveal more information about each team member when clicked. Here's a breakdown of how the code works:


HTML Structure:

  1. <head> Section:

    • Meta Tags:

      • <meta charset="UTF-8"> specifies the character encoding (UTF-8) for the page.

      • <meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the page responsive by setting the viewport to the device width and scaling it accordingly.

    • <title> defines the title of the page, which appears in the browser's tab.

    • <style> is used for internal CSS (styling) of the page. We'll explain the CSS in the next section.

  2. <body> Section:

    • Header Section:

      • The header contains an <h1> element, which is the title of the webpage: "Our Amazing Team."

    • Team Member Containers:

      • The div with the class team-container holds the individual team-member divs.

      • Each team member is represented by a div with the class team-member, and within it:

        • An img tag displays the member's picture (using a placeholder image for demonstration).

        • An <h3> tag shows the name of the team member.

        • A <p> tag with the class role specifies the member's job role.

        • A <p> tag with the class description contains more information about the team member, initially hidden.

        • A button (<button>) is used to toggle the visibility of the description text. The onclick event triggers the JavaScript function toggleDescription('desc1') (for example), passing the id of the description element as an argument.


CSS Styling:

  1. Global Styles:

    • The body tag sets the font family to Arial, the background color to a light gray (#f4f4f4), and removes default margins and padding.

  2. Header Styling:

    • The header tag has a dark background color (#333) and white text color. It is centered with padding on top and bottom for spacing.

  3. Team Container Layout:

    • The .team-container uses flexbox to display the team members in a row, but they wrap onto the next line on smaller screens (flex-wrap: wrap), making the layout responsive. It also has a margin of 20px around the container.

  4. Individual Team Member Styling:

    • The .team-member class is styled with a white background, rounded corners (border-radius: 8px), and padding. A subtle box-shadow (box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)) adds depth to the cards.

    • The :hover effect on .team-member enlarges the card slightly when hovered (transform: scale(1.05)).

  5. Team Member Image Styling:

    • Each team member’s image is styled to be a circle (border-radius: 50%), with a size of 100px x 100px. The object-fit: cover ensures the image fills the circle without distorting the aspect ratio.

  6. Text Styling:

    • Team member names (h3) have some margin for spacing, and the role (.role) is styled with a lighter color (#555) for contrast.

    • The description paragraph is initially hidden (display: none) and has a smaller font size and a lighter color.

  7. Button Styling:

    • The button is styled with a dark background (#333), white text, padding, and rounded corners. On hover, the background color darkens (#444).


JavaScript Functionality:

The JavaScript code is responsible for the toggle effect on the description sections.

  • toggleDescription(id) Function:

    • This function is called when a "More Info" button is clicked. It takes the id of the corresponding description paragraph (desc1, desc2, desc3, etc.) as an argument.

    • Inside the function:

      • The description element is fetched using document.getElementById(id).

      • The if condition checks if the description's display style is "none" (hidden) or empty (not set). If so, it sets the display style to "block", making it visible.

      • If the description is already visible, it sets display to "none", hiding it again.


How It Works in Practice:

  • When the page loads, only the team member's name, role, and image are visible.

  • When the user clicks the "More Info" button for a specific team member, the additional description for that member is shown or hidden.

  • The layout is responsive, so the cards adjust their position based on the screen size, stacking vertically on smaller screens.


Possible Customization:

  • You can add more team members by duplicating the team-member divs and changing their names, roles, and descriptions.

  • You can update the placeholder images (https://via.placeholder.com/100) with real images of the team members.

  • Modify the CSS to change colors, fonts, or add animations for more interactivity.


Team Showcase Modifications:

Learn how to customize the Team Showcase page to suit your needs.


1. Customizing Team Members' Information

Each team member's section is represented by a div with the class team-member. You can add more members or change the details of the current ones.


To Add More Team Members:

  1. Copy one of the existing <div class="team-member"> blocks.

  2. Paste it below the other member blocks inside the .team-container div.

  3. Change the content (name, role, description, and image) accordingly.


Example:

<!-- Add another Team Member -->
<div class="team-member">
    <img src="https://via.placeholder.com/100" alt="New Member">
    <h3>New Member Name</h3>
    <p class="role">New Role</p>
    <p class="description" id="desc4">This is a short description about the new team member's background and skills.</p>
    <button class="btn-toggle" onclick="toggleDescription('desc4')">More Info</button>
</div>

To Change Existing Team Members' Information:

Modify the existing content inside the team-member div. Here are the parts you can customize:

  • Name: Modify the <h3> tag text.

  • Role: Modify the text inside the <p class="role"> tag.

  • Description: Modify the text inside the <p class="description"> tag.

  • Image: Update the src attribute in the <img> tag with a new image URL (ensure the image is a circular crop, or adjust CSS if it's not).


Example of editing a team member:

<!-- Modify existing Team Member -->
<div class="team-member">
    <img src="https://your-image-link.com/new-image.jpg" alt="New Member">
    <h3>Alex Johnson</h3>
    <p class="role">Software Engineer</p>
    <p class="description" id="desc1">Alex specializes in full-stack development and has a knack for building scalable and secure applications.</p>
    <button class="btn-toggle" onclick="toggleDescription('desc1')">More Info</button>
</div>

2. Customizing the Layout (CSS Adjustments)

The CSS section controls the appearance of the page, including the layout, fonts, colors, and hover effects.


To Change the Background Color:

  • Locate the following line in the body section of CSS:

background-color: #f4f4f4;

  • Change the hex color value (#f4f4f4) to any color you prefer, for example: 

background-color: #e0f7fa; /* Light cyan background */

To Change the Font Family:

  • Find the font-family declaration under the body tag in CSS: 

font-family: Arial, sans-serif;

  • Replace it with any font you'd like. You can use web-safe fonts or link to Google Fonts for more options: 

font-family: 'Roboto', sans-serif;

To Adjust the Card Layout (Team Member's Box):

  1. The .team-member class controls the individual team member's card.

.team-member {
    background-color: white; /* White background */
    border-radius: 8px;       /* Rounded corners */
    margin: 15px;             /* Space around the element */
    padding: 20px;            /* Space inside the element */
    width: 250px;             /* Fixed width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center;       /* Center-align text */
}

  • Width: Change the width of each card by modifying the width property (e.g., change 250px to 300px to make the cards wider).

  • Padding: Adjust the internal padding by changing padding: 20px; to a larger or smaller value.

  • Box Shadow: Modify the box-shadow for a more prominent effect or softer shadow: box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);


To Change Hover Effects:

  • The hover effect (.team-member:hover) scales the card slightly when hovered.

.team-member:hover {
    transform: scale(1.05);
}

  • To adjust the scale (how much the card enlarges on hover), change the value inside scale(). For example, changing scale(1.05) to scale(1.1) will make the card enlarge more when hovered.


To Customize Button Style:

  • The .btn-toggle class controls the button’s appearance:

.btn-toggle {
    background-color: #333;       /* Dark background color */
    color: white;                 /* White text color */
    border: none;                 /* Removes the border */
    padding: 10px 15px;           /* Padding inside the button */
    cursor: pointer;             /* Changes the cursor to a pointer (hand icon) when hovered */
    font-size: 1em;               /* Sets the font size */
    margin-top: 15px;             /* Adds top margin for spacing */
    border-radius: 5px;           /* Rounds the corners of the button */
}

  • Background Color: Change the background-color property to change the button's color. 

background-color: #007bff; /* Blue color */

  • Hover Effect: Customize the button's hover effect by changing the

.btn-toggle:hover {
    background-color: #0056b3;  /* Darker blue background on hover */
}

3. Customizing JavaScript Behavior

The JavaScript handles the toggling of the description when the "More Info" button is clicked.


To Change the Toggle Effect:

  • Find the toggleDescription(id) function: 

function toggleDescription(id) {
    var description = document.getElementById(id);
    
    if (description.style.display === "none" || description.style.display === "") {
        description.style.display = "block";
    } else {
        description.style.display = "none";
    }
}

  • You can modify this function to perform different actions, such as adding animation or other effects when the description is shown/hidden.


Example: Changing the Toggle Effect to Fade In/Out

If you'd prefer a fade-in/fade-out effect instead of simply toggling the display, you can modify the JavaScript to use CSS transitions. Here's an example modification:

  • CSS Changes: Add a transition effect to .description:

.description {
    opacity: 0;                /* Initially hidden */

    visibility: hidden;        /* Hidden, but still takes up space */

    transition: opacity 0.3s ease, visibility 0s 0.3s;  /* Fade in/out and delay visibility change */

}



.description.show {

    opacity: 1;                /* Fully visible */

    visibility: visible;       /* Element is visible */

}

  • JavaScript Changes: Modify the toggleDescription function to control opacity:

function toggleDescription(id) {
    var description = document.getElementById(id);



    // If the description is currently hidden, show it

    if (description.style.opacity === "0" || description.style.opacity === "") {

        description.style.display = "block"; // Ensure the element is visible

        setTimeout(function() {

            description.style.opacity = "1"; // Fade in by setting opacity to 1

        }, 10); // Small delay to ensure the display change is applied before fading

    } else {

        description.style.opacity = "0"; // Fade out by setting opacity to 0

        setTimeout(function() {

            description.style.display = "none"; // Hide the element after fading out

        }, 300); // Wait for the fade-out (300ms) to complete before hiding

    }

}

4. Customizing the Team Container (Responsive Layout)

The team-container uses flexbox to create a responsive layout. This means the team member cards will adjust to the screen size.


To Change the Number of Columns:

  • The .team-container is set to use flexbox: 

.team-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px;
}

  • To control how many cards fit on a row, modify the width of the .team-member class or add media queries to adjust based on screen size.


Example using media queries to change the number of columns on smaller screens:

@media screen and (max-width: 768px) {
    .team-member {
        width: 200px;  /* Cards become smaller on tablets */
    }
}

@media screen and (max-width: 480px) {
    .team-member {
        width: 100%;  /* Cards take full width on small screens (phones) */
    }
}

5. Adding External Libraries (Optional)

If you want to enhance the functionality further (for example, using a lightbox for images or adding animations), you can include external libraries like FontAwesome for icons or Animate.css for advanced animations.


To include FontAwesome icons:

  • Add this line inside the <head> section of your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

  • Use icons in the HTML like this:

<button class="btn-toggle">
    <i class="fas fa-info-circle"></i> 

    More Info

</button>

Conclusion

By following these steps, you can fully customize the Team Showcase page, including:

  • Adding new team members.

  • Customizing their information and images.

  • Adjusting the layout, colors, fonts, and hover effects.

  • Modifying the JavaScript for new interactivity or effects.


Experiment with the code and personalize it to match your post’s design and your team’s needs!

bottom of page