JS Concealing all categories on the page

Working on a webpage, I have created a new view to display categories and devised a solution for categorizing all the data in the app.

However, I am facing some unresolved issues.

The problem lies in the fact that when I first open my webpage, all the categories from the list are visible. What I want is for the categories to only become visible after clicking on the category items.

Below is a snippet of my code:

.wrap {
    max-width: 1100px;
    width: 90%;
    margin: auto;
}

.category_list .ct_item-active {
    background: #2D3E50;
}
        
// Other CSS styles...

$(document).ready(function () {
    // JavaScript functions...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This current setup does not showcase all the categories on the main page. On reloading the page, however, all the categories become visible even though there are more than three. I aim to display these categories only upon pressing the category items.

Answer №1

To hide the product items, simply add

.products-list .product-item { display:none}
to your CSS.

$(document).ready(function () {
    $('.category_list .category_item[category="all"]').addClass('ct_item-active');

    $('.category_item').click(function () {
        var catProduct = $(this).attr('category');
        console.log(catProduct);

        $('.category_item').removeClass('ct_item-active');
        $(this).addClass('ct_item-active');

        $('.product-item').css('transform', 'scale(0)');
        function hideProduct() {
            $('.product-item').hide();
        } setTimeout(hideProduct, 400);

        function showProduct() {
            $('.product-item[category="' + catProduct + '"]').show();
            $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
        } setTimeout(showProduct, 400);
    });

});
.wrap {
    max-width: 1100px;
    width: 90%;
    margin: auto;
}

.wrap > h1 {
    color: #494B4D;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 15px 0px;
}

.wrap > h1:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #C7C7C7;
    margin: 20px 0;
}

.store-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.category_list {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.category_list .category_item {
    display: block;
    width: 100%;
    padding: 15px 0;
    margin-bottom: 20px;
    background: #E84C3D;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.category_list .ct_item-active {
    background: #2D3E50;
}

.products-list {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
}


.products-list .product-item {
    width: 35%;
    margin-left: 3%;
    margin-bottom: 25px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    transition: all .4s;
    display:none;
}

.products-list .product-item img {
    width: 100%;
}

.products-list .product-item a {
    display: block;
    width: 100%;
    padding: 8px 0;
    background: #2D3E50;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
    <div class="store-wrapper">
        <div class="category_list">
            <a href="#" class="category_item" category="Technical">Technical</a>
            <a href="#" class="category_item" category="Organizational">Organizational</a>

        </div>
        <section class="products-list">
            <div class="product-item" category="Technical">
                <img src="~/images/100004-200.png" alt="">
                <a href="#">Equipment</a>
            </div>
            <div class="product-item" category="Technical">
                <img src="~/images/100004-200.png" alt="">
                <a href="#">Tool</a>
            </div>
            <div class="product-item" category="Organizational">
                <img src="~/images/100004-200.png" alt="">
                <a href="#">Material</a>
            </div>
        </section>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Server-side script for communicating with client-side JavaScript applications

Currently utilizing a JavaScript library that uses a JSON file to display content on the screen in an interactive manner. (::Using D3JS Library) While working with clients, it is easy to delete, edit, and create nodes which are then updated in the JSON fi ...

How can I retrieve data submitted in a POST request on my Node.js server

I'm having trouble sending form data to a node/express server using AJAX. After submitting, I keep getting redirected to a 'Cannot POST /' page. Although I can log the request object on the server side, the data from the form is missing. Wha ...

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

Error encountered with react-query and UseQueryResult due to incorrect data type

I'm currently implementing react-query in my TypeScript project: useOrderItemsForCardsInList.ts: import { getToken } from '../../tokens/getToken'; import { basePath } from '../../config/basePath'; import { getTokenAuthHeaders } fr ...

Retrieving information from defined component in Vue

Recently, I've been diving into Vue and learning about templates. I discovered that you can pass data from a child component to a parent component using $emit(). app.js Vue.component('tweet-postbox', require('./components/tweetPos ...

"Set a timeout for an HTML markup to be displayed in an AJAX

Is there a way to automatically hide the success message that appears after an AJAX request is successful? For example, after 2 seconds of displaying the message, I want it to disappear. Here's the code I have: $.ajax({ url : 'process/regis ...

Utilizing JQuery for retrieving a filename

I have a unique file upload button on my website. To provide the user with visual feedback about their chosen file, I modify the html of a div to display the file name. My jquery code is as follows: $("input[type=file]").change(function() { var filen ...

What are the steps for initializing a session in Vue.js with Django upon a successful login?

Upon successful login, I want to redirect to a page indicating success and also include a session. How can this be achieved? I am using HTML with Vue.js for the front end and Django for the back end. Below is my Vue.js script for the login: <script> ...

Tips on arranging JSON elements based on the sequence of another JSON

Currently, I am facing a challenge with sorting a list of parks (park_list) based on both distance and area. The code snippet below successfully sorts the list by distance: sortList(index){ return function(a, b){ return (a[index] === b[index] ? 0 : ...

Adjust the styling with jQuery according to the selected value from the dropdown menu

Check out this Fiddle I have a jQuery script that is supposed to change the style of an input box to display:block if the selected value is "<>" (Between). However, currently it is changing the css for all selected items instead of just the target i ...

What is the process for loading a script file from within a component's HTML?

My goal was to include a specific script file in the component html, but I noticed that when I added the script reference within the html itself, the inner script file was not rendered along with the component on the page. Component import { Component } ...

I am having trouble understanding why dropdown menus with the same content have varying widths

My issue is illustrated in the screenshots below: first-dropdown: second-dropdown: The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same. HTML code: <div class="row menu"> ...

Can anyone tell me a way to automatically rotate a text or image every 2 seconds?

I've come across a CSS code that enables rotating any text or image by 180% on hover: .card-container { height: 150px; perspective: 600; position: relative; width: 150px; } .card { height: 100%; position: absolute; transform-style: pres ...

Trouble with Bootstrap popover displaying content

I've been working on implementing the bootstrap popover feature on a website and have had some success. I managed to get the popover to appear when the link is clicked, but unfortunately, I'm not seeing any content in the box other than the title ...

How can we avoid repeated evaluations by using memoization in a function?

Currently, I am working on a jQuery function designed to switch HTML elements based on specific viewports. The concept is quite simple: <div data-swap-for="#element" data-swap-on="phone"></div> This code snippet will insert the element with t ...

Forward to a task with a unique identifier obtained through asynchronous JavaScript calls

I am currently working on an application that utilizes AJAX with FullCalendar functionality. My goal is to enable users to click on a specific item on the calendar, prompting a dialog box with a "View Details" button. Clicking on this button should redire ...

What is the best way to create a nested match using regex?

const foundMatches = regExPattern.match(/\((.+?)\)/g); When tested against: [example[1]] The result is "[example[1]", indicating a potential nesting issue. How can this be resolved? ...

Update the data-value parameter dynamically after a successful Ajax request without utilizing the element's

I have a bunch of different buttons to switch the status of various projects: <div class="btn-group btn-toggle project_status" data-project-id="1" data-form="project_status" data-value="1"> <button class="btn btn-default active">ACTIVE</ ...

Guide to building a robust tab system using JQuery and Ajax

I am currently working on a mockup page where the accordion feature is functioning well. However, I am looking to implement a tab-like system that will allow users to navigate between different pages. Specifically, I want users to be able to click on page ...

Top Method for Incorporating Syntax Highlighting into Code Blocks - React Sanity Blog

I'm currently exploring the most effective method to incorporate syntax highlighting into my react sanity.io blog. Here's a look at the article component I've developed using react: import React, {useEffect, useState} from "react"; import ...