How to add filter with Portfolio Gallery using HTML CSS and JavaScript?

Last Updated : 18 Jun, 2024

A portfolio gallery is ideal for websites with diverse or extensive content. It allows you to showcase all content on the front page in an organized manner. By adding filters, users can easily find specific content they are interested in.

Portfolio Gallery

Approach

The HTML defines the structure, including a container for the title, buttons for filtering different categories, and a gallery grid for portfolio items grouped by categories like Markup, Style, and Scripting.
The CSS styles the page elements, setting dimensions, colors, and layout properties. It includes responsive design adjustments to ensure the gallery adapts to various screen sizes, with columns changing width at different breakpoints.
Buttons are assigned classes and click events to filter portfolio items. The geeksportal function shows or hides items based on the category selected.
The geeksportal function filters items by adding or removing the “show” class to elements based on their category.
JavaScript adds an event listener to each button to highlight the currently active filter button by adding the “active” class.

Example: The example shows how to add filter with Portfolio Gallery using HTML, CSS and JavaScript.

html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
</head>

<body>

    <!-- Title and tag -->
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h3>A Computer Science Portal for Geeks</h3>
        <hr>

        <!-- Content of the body-->
        <h2>Portfolio of Languages</h2>

        <!-- Button foreach group -->
        <div id="filtering">
            <button class="bttn active"
                    onclick="geeksportal('all')"> 
            Show all
            </button>
            <button class="bttn"
                    onclick="geeksportal('Markup')"> 
            Markup
            </button>
            <button class="bttn"
                    onclick="geeksportal('Style')"> 
            Style
            </button>
            <button class="bttn"
                    onclick="geeksportal('Scripting')"> 
            Scripting
            </button>
        </div>

        <!-- Portfolio Gallery Grid -->
        <div class="row">
            <div class="column Markup">
                <div class="content">
                    <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/html.png"
                         alt="HTML" style="width:100%">
                    <h3><a href="#">
                        HTML Tutorials
                        </a>
                    </h3>
                    <p>
                        HTML stands for Hyper Text Markup
                        Language. It is used to design web
                        pages using markup language. HTML
                        is the combination of Hypertext
                        and Markup language. Hypertext
                        defines the link between the web
                        pages.
                    </p>
                </div>
            </div>
            <div class="column Styleshit">
                <div class="content">
                    <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
                        alt="CSS" style="width:100%">
                    <h3><a href="#">
                        CSS Tutorials
                        </a>
                    </h3>
                    <p>
                        Cascading Style Sheets, fondly
                        referred to as CSS, is a simply
                        designed language intended to
                        simplify the process of making
                        web pages presentable. CSS allows
                        you to apply styles to web pages.
                    </p>
                </div>
            </div>
            <div class="column Scripting">
                <div class="content">
                    <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/php-1.png"
                        alt="" style="width:100%">
                    <h3><a href="#">
                        PHP Tutorials
                        </a>
                    </h3>
                    <p>
                        The term PHP is an acronym for PHP: 
                        Hypertext Preprocessor. PHP is a 
                        server-side scripting language 
                        designed specifically for web 
                        development. PHP can be easily
                        embedded in HTML files.
                    </p>
                </div>
            </div>
            <div class="column Scripting">
                <div class="content">
                    <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/javascript.png"
                        alt="" style="width:100%">
                    <h3><a href="#">
                        JavaScript Tutorials
                        </a>
                    </h3>
                    <p>
                        Javascript was developed by Brendan
                        Eich in 1995. At first, it was called
                        LiveScript but was later name to 
                        JavaScript. JavaScript is the muscle
                        of the structure
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS

/* Wildcard styling */
* {
    box-sizing: border-box;
}

/* Padding for whole body */
body {
    padding: 15px;
}

.container {
    max-width: 1200px;
    margin: auto;
}

/* Styling h2 tag */
h1 {
    Color: green;
    word-break: break-all;
}

/* Anchor tag decoration */
a {
    text-decoration: none;
    color: #5673C8;
}

a:hover {
    color: lightblue;
}

.row {
    margin: 0px -14px;
    padding: 8px;
}

.row>.column {
    padding: 6px;
}

.column {
    float: left;
    width: 25%;
    display: none;
}

/* Content decoration */
.content {
    background-color: white;
    padding: 10px;
    border: 1px solid gray;
}

/* Paragraph decoration */
p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.content {
    background-color: white;
    padding: 10px;
    border: 1px solid gray;
}

.show {
    display: block;
}

/* Style the filter buttons */
.bttn {
    border: none;
    padding: 8px 14px;
    background-color: gray;
}

.bttn:hover {
    background-color: #007EE5;
    opacity: 0.8;
}

.bttn.active {
    background-color: #007EE5;
    color: white;
}

/* Window size 850 width set */
@media screen and (max-width: 850px) {
    .column {
        width: 50%;
    }
}

/* Window size 400 width set */
@media screen and (max-width: 400px) {
    .column {
        width: 100%;
    }
}

JavaScript

geeksportal("all")

function geeksportal(c) {
    let x, i;

    x = document.getElementsByClassName("column");

    if (c == "all") c = "";

    for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");

        if (x[i].className.indexOf(c) > -1)
            w3AddClass(x[i], "show");
    }
}

function w3AddClass(element, name) {
    let i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");

    for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {
            element.className += " " + arr2[i];
        }
    }
}

function w3RemoveClass(element, name) {
    let i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
    }
    element.className = arr1.join(" ");
}

// Add active class to the current
// button (highlight it)
let btnContainer = document.getElementById("filtering");
let btns = btnContainer.getElementsByClassName("bttn");
for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {

        let current =
            document.getElementsByClassName("active");

        current[0].className =
            current[0].className.replace(" active", "");

        this.className += " active";
    });
}