Javascript Hide/Show div not working on input searchBar

Question

I'm having trouble running javascript hide/show div using CSS classes, the initial state all the divs are hidden than when i type in the searchBar the name of the recipe (like the div ribs) it show only the ribs div and so far is working, but when i clear the searchBar its show all the div instead of hiding all of them again.

HTML

<section class="recipe section" id="work">
            <h2 class="section__title">Recipe</h2>
            <div class="recipe__filters">
                <input type="text" onkeyup="search_recipe()" placeholder="search" id="search" class="section__search"></input>
                <div class="cat">
                    <h3>Categories</h3>
                    <i class="uil uil-arrow-right" id="categories-button"></i>
                </div>
                <div class="hide_categories" id="h_categories">
                    <span class="all recipe__item active-recipe " data-filter='all'>All </span>
                    <span class="recipe__item" data-filter='.breakfast'>Breakfast</span>
                    <span class="recipe__item" data-filter='.dessert'>dessert</span>
                    <span class="recipe__item" data-filter='.burgersandwiches'>Burger & Sandwiches</span>
                </div>

            </div>
            <div class="recipe__container container">
                <!-- <div class="recipe__card mix ">
                    <img src="./asset/img" alt="" class="recipe__img">
                    <h3 class="recipe-title-item"></h3>
                    <a href="#" class="recipe__button">
                        More details <i class='uil uil-angle-right-b recipe__icon'></i> 
                    </a>
                </div> -->
                <div class="recipe__card mix">
                    <img src="./asset/img/ramen_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Helllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix">
                    <img src="./asset/img/burrito_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">aelllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix">
                    <img src="./asset/img/pasta_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Telllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix burgersandwiches">
                    <img src="./asset/img/burger_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Telllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix">
                    <img src="./asset/img/chips_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Telllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix ">
                    <img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Telllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix ">
                    <img src="./asset/img/steaks_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Zelllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix ">
                    <img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Telllllllo</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>
                <div class="recipe__card mix ">
                    <img src="./asset/img/ribs_recipe.jpeg" alt="" class="recipe__img">
                    <h3 class="recipe-title-item">Ribs</h3>
                    <a href="#" class="blog__button">
                        More details <i class='uil uil-angle-right-b blog__icon'></i> 
                    </a>
                </div>

        </section>

CSS

.recipe__container {
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.recipe__filters {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .75rem;
    flex-direction: column;
}

.recipe__item {
    cursor: pointer;
    color: var(--title-color);
    padding: .25rem .75rem;
    font-weight: var(--font-medium);
    border-radius: .5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.recipe__items {
    cursor: pointer;
    color: var(--title-color);
    font-weight: var(--font-medium);
    border-radius: .5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.recipe__card {
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    padding: 1rem;
    border-radius: 1rem;
    display: none;
}

.recipe__img {
    border-radius: 1rem;
    margin-bottom: var(--mb-1-25);
    width: 230px;
}

.recipe-title-item {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-0-75);
}

.hide_categories {
    display: none;
    transition: all ease-in-out;
}

.categories {
    display: grid;
    padding-bottom: 2rem;
    transition: all ease-in-out;
    grid-template-columns: repeat(4, max-content);
}

#categories-button {
    z-index: 9;
}

.cat {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

#categories-button {
    margin-left: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
}

.active-recipe {
    background-color: var(--first-color);
    color: var(--white-color);
}

input[type="text"],
input[type="email"],
textarea[type="text"],
select {
    padding-left: 1rem;
}

.recipe {
    display: block;
}

JAVASCRIPT

function search_recipe() {
    let input = document.getElementById('search').value
    input = input.toLowerCase();
    let recipeCard = document.getElementsByClassName('recipe__card');

    for (i = 0; i < recipeCard.length; i++) {

        if (recipeCard[i].textContent.toLowerCase().includes(input)) {
            recipeCard[i].style.display = "block";
        } else {
            recipeCard[i].style.display = "none";

        }
    }
}

Answer 1

 function search_recipe() { let input = document.getElementById('search').value input = input.toLowerCase(); let recipeCard = document.getElementsByClassName('recipe__card'); for (i = 0; i < recipeCard.length; i++) { if (input.= "" && recipeCard[i].textContent.toLowerCase().includes(input)) { recipeCard[i].style;display = "block". } else { recipeCard[i].style;display = "none"; } } }

 .recipe__container { padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 3rem; }.recipe__filters { display: flex; justify-content: center; align-items: center; column-gap: .75rem; flex-direction: column; }.recipe__item { cursor: pointer; color: var(--title-color); padding: .25rem.75rem; font-weight: var(--font-medium); border-radius: .5rem; margin-bottom: 2rem; text-align: center; }.recipe__items { cursor: pointer; color: var(--title-color); font-weight: var(--font-medium); border-radius: .5rem; margin-bottom: 2rem; text-align: center; }.recipe__card { box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); padding: 1rem; border-radius: 1rem; display: none; }.recipe__img { border-radius: 1rem; margin-bottom: var(--mb-1-25); width: 230px; }

 <section class="recipe section" id="work"> <h2 class="section__title">Recipe</h2> <div class="recipe__filters"> <input type="text" onkeyup="search_recipe()" placeholder="search" id="search" class="section__search"></input> <div class="cat"> <h3>Categories</h3> <i class="uil uil-arrow-right" id="categories-button"></i> </div> <div class="hide_categories" id="h_categories"> <span class="all recipe__item active-recipe " data-filter='all'>All </span> <span class="recipe__item" data-filter='.breakfast'>Breakfast</span> <span class="recipe__item" data-filter='.dessert'>dessert</span> <span class="recipe__item" data-filter='.burgersandwiches'>Burger & Sandwiches</span> </div> </div> <div class="recipe__container container"> <.-- <div class="recipe__card mix "> <img src="./asset/img" alt="" class="recipe__img"> <h3 class="recipe-title-item"></h3> <a href="#" class="recipe__button"> More details <i class='uil uil-angle-right-b recipe__icon'></i> </a> </div> --> <div class="recipe__card mix"> <img src="./asset/img/ramen_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Helllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix"> <img src="./asset/img/burrito_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">aelllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix"> <img src="./asset/img/pasta_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix burgersandwiches"> <img src="./asset/img/burger_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix"> <img src="./asset/img/chips_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/steaks_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Zelllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/ribs_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Ribs</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> </section>

All I added is the following condition inside the for-loop: input != ""

If the input is blank, the program will jump to the else statement which hides the recipeCards.

Answer 2

I added your code into a snippet, so I added a condition that checks if input's value is empty, if so, it would make all elements hidden, if not, it executes your code.

 function search_recipe() { let input = document.getElementById('search').value input = input.toLowerCase(); let recipeCard = document.getElementsByClassName('recipe__card'); if(input === ""){ for (i = 0; i < recipeCard.length; i++) { recipeCard[i].style.display = "none"; } } else { for (i = 0; i < recipeCard.length; i++) { if (recipeCard[i].textContent.toLowerCase().includes(input)) { recipeCard[i].style.display = "block"; } else { recipeCard[i].style.display = "none"; } } } }

 .recipe__container { padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 3rem; }.recipe__filters { display: flex; justify-content: center; align-items: center; column-gap: .75rem; flex-direction: column; }.recipe__item { cursor: pointer; color: var(--title-color); padding: .25rem.75rem; font-weight: var(--font-medium); border-radius: .5rem; margin-bottom: 2rem; text-align: center; }.recipe__items { cursor: pointer; color: var(--title-color); font-weight: var(--font-medium); border-radius: .5rem; margin-bottom: 2rem; text-align: center; }.recipe__card { box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); padding: 1rem; border-radius: 1rem; display: none; }.recipe__img { border-radius: 1rem; margin-bottom: var(--mb-1-25); width: 230px; }.recipe-title-item { font-size: var(--normal-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb-0-75); }.hide_categories { display: none; transition: all ease-in-out; }.categories { display: grid; padding-bottom: 2rem; transition: all ease-in-out; grid-template-columns: repeat(4, max-content); } #categories-button { z-index: 9; }.cat { display: flex; align-items: center; margin-bottom: 1rem; } #categories-button { margin-left: 1rem; cursor: pointer; font-size: 1.5rem; }.active-recipe { background-color: var(--first-color); color: var(--white-color); } input[type="text"], input[type="email"], textarea[type="text"], select { padding-left: 1rem; }.recipe { display: block; }

 <section class="recipe section" id="work"> <h2 class="section__title">Recipe</h2> <div class="recipe__filters"> <input type="text" onkeyup="search_recipe()" placeholder="search" id="search" class="section__search"></input> <div class="cat"> <h3>Categories</h3> <i class="uil uil-arrow-right" id="categories-button"></i> </div> <div class="hide_categories" id="h_categories"> <span class="all recipe__item active-recipe " data-filter='all'>All </span> <span class="recipe__item" data-filter='.breakfast'>Breakfast</span> <span class="recipe__item" data-filter='.dessert'>dessert</span> <span class="recipe__item" data-filter='.burgersandwiches'>Burger & Sandwiches</span> </div> </div> <div class="recipe__container container"> <.-- <div class="recipe__card mix "> <img src="./asset/img" alt="" class="recipe__img"> <h3 class="recipe-title-item"></h3> <a href="#" class="recipe__button"> More details <i class='uil uil-angle-right-b recipe__icon'></i> </a> </div> --> <div class="recipe__card mix"> <img src="./asset/img/ramen_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Helllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix"> <img src="./asset/img/burrito_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">aelllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix"> <img src="./asset/img/pasta_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix burgersandwiches"> <img src="./asset/img/burger_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix"> <img src="./asset/img/chips_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/raspberry_brownies_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/steaks_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Zelllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/shrimp_pasta_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Telllllllo</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> <div class="recipe__card mix "> <img src="./asset/img/ribs_recipe.jpeg" alt="" class="recipe__img"> <h3 class="recipe-title-item">Ribs</h3> <a href="#" class="blog__button"> More details <i class='uil uil-angle-right-b blog__icon'></i> </a> </div> </section>