My Transition property did not working when I click one button from another-CodePudding

Here is the code. where I try to create a restaurant menu page. There are five buttons. Problem is when I click one to another button the .active class transition property does not working. What I did wrong here?

// selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);

// selecting all menu button
var allMenu = document.querySelector(".all");

// selecting asian menu item
var asianMenu= document.querySelector(".asian");

// selecting chinese menu item 
var chnsMenu = document.querySelector(".chinese");

// selecting desi menu item 
var desiMenu = document.querySelector(".desi");

// selecting desert menu item 
var desertMenu = document.querySelector(".desert");

// selecting the cuisine DIV

var asianCuisine = document.querySelector(".asian-cuisine");

var chineseCuisine = document.querySelector(".chinese-cuisine");

var desiCuisine = document.querySelector(".desi-cuisine");

var desertCuisine  = document.querySelector(".desert-cuisine");






// add eventlister to all the buttons

for (let i=0;i<menuDiv.length;i  ){
    menuDiv[i].addEventListener("click", function(e){
            
        e.target.preventDefault;

        if(e.target == asianMenu){
                asianCuisine.classList.replace("hidden" ,"active");
                chineseCuisine.classList.add("hidden");
                desiCuisine.classList.add("hidden");
                desertCuisine.classList.add("hidden");
                
            }

            if(e.target == chnsMenu){
                console.log("Kazi");
                chineseCuisine.classList.replace("hidden","active");
                desiCuisine.classList.add("hidden");
                desertCuisine.classList.add("hidden");
                asianCuisine.classList.add("hidden");
            }

            if(e.target == desiMenu){
                console.log("Kazi");
                desiCuisine.classList.replace("hidden","active");
                chineseCuisine.classList.add("hidden");
                desertCuisine.classList.add("hidden");
                asianCuisine.classList.add("hidden");
            }

            if(e.target == desertMenu){
                console.log("Kazi");
                desertCuisine.classList.replace("hidden","active");     
                chineseCuisine.classList.add("hidden");
                desiCuisine.classList.add("hidden");
                asianCuisine.classList.add("hidden");
            }

            if(e.target == allMenu){
                console.log("Kazi");
                desertCuisine.classList.replace("hidden","active");
                chineseCuisine.classList.replace("hidden","active");
                desiCuisine.classList.replace("hidden","active");
                asianCuisine.classList.replace("hidden","active");
            }
    })
}

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


/* working with the title */

.title{
    text-align: center;
    font-size: 4rem;
    font-family: 'Poppins', sans-serif;
}
.underline{
    position: absolute;
    width: 600px;
    height: 2px;
   background-color: black;
   left: 50%;
   transform: translate(-50%);

}

/* working with the menu buttons */

.menu-btns{
    text-align: center;
    margin-top: 30px;
    
}


.menu-btns button{
    padding: 10px 20px;
    margin-left: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    border: none;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}
.menu-btns button:hover{
    background-color: chartreuse;
    transition: 0.5s ease-out;
}

/* menu display area */

/* .display-Area{
    margin-top: 60px;
    margin-left: 10%;
    display: grid;
    grid-template-columns: auto auto;
} */
.display-Area img{
    /* border: 1px solid black; */
    width: 500px;
    height: 300px;
    border-radius: 5px;
    box-shadow: 0px 0px 15px 0px black;
    
    cursor: pointer;
}

.display-Area img:hover{
    
    transform: scale(1.1);
    transition: 0.5s ease-out;

}

/* display flex for every cuisine */

.asian-cuisine{
    /* border: 2px solid black; */
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    gap: 20px;flex-wrap: wrap;
    align-items: center;
    text-align: center;
    transition: 0.5s ease-out;
}

.chinese-cuisine{
    /* border: 2px solid black; */
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    gap: 20px;flex-wrap: wrap;
    align-items: center;
    text-align: center;
    transition: 0.5s ease-out;
}

.desi-cuisine{
    /* border: 2px solid black; */
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    gap: 20px;flex-wrap: wrap;
    align-items: center;
    text-align: center;
    transition: 0.5s ease-out;
}

.desert-cuisine{
    /* border: 2px solid black; */
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    gap: 20px;flex-wrap: wrap;
    align-items: center;
    text-align: center;
    transition: 0.5s ease-out;
}

/* for the javascript manipulation class */



.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine{
    display: flex;
    justify-content: space-around;
    gap: 20px;flex-wrap: wrap;
    align-items: center;
    text-align: center;
    transition: 0.5s all ease-out;

}

.hidden{
    display: none;
   transition: 0.5s all ease-out;
}

<div class="wrapper">

        
        <div class="home-container">  
            <div class="title">Restaurent Menu</div>
            <div class="underline"></div>
            <div class="menu-btns">
                <button class="all">All Items</button>
                <button class="asian">Asian Cuisine</button>
                <button class="chinese">Chinese Item</button>
                <button class="desi">Desi Item</button>
                <button class="desert">Desert Item</button>
            </div>


            <!-- item display Area -->
            <div class="display-Area">

                <!-- Asian Cuisine -->
                <div class="asian-cuisine">
                        <div class="asianItem">
                            <div class="img"><img src="images/asian01.jpg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">1st Title Asian</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
                            </div>
                        </div>

                        <div class="asianItem">
                            <div class="img"><img src="images/asian02.jpg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">2nd Title Asian</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
                            </div>
                        </div>

                        <div class="asianItem">
                            <div class="img"><img src="images/asian02.jpg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">3rd Title Asian</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
                            </div>
                        </div>

                        <div class="asianItem">
                            <div class="img"><img src="images/asian04.jpg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">4th Title Asian</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
                            </div>
                        </div>
                </div>

                <!--Chinese Item  -->
            <div class="chinese-cuisine">    

                <div class="chineseItem">
                    <div class="img"><img src="images/chi01.jpg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">1st Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>

                <div class="chineseItem">
                    <div class="img"><img src="images/chi02.jpg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">2nd Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>

                <div class="chineseItem">
                    <div class="img"><img src="images/chi03.jpeg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">3rd Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>

                <div class="chineseItem">
                    <div class="img"><img src="images/chi04.jpg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">4th Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>

            </div>    

                <!-- Desi Item -->
            
            <div class="desi-cuisine">    
                <div class="desiItem">
                    <div class="img"><img src="images/desi01.jpg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">1st Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>

                <div class="desiItem">
                    <div class="img"><img src="images/desi02.jpg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">2nd Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>

                <div class="desiItem">
                    <div class="img"><img src="images/desi03.jpg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">3rd Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>

                <div class="desiItem">
                    <div class="img"><img src="images/desi04.jpg" alt=""></div>
                    <div class="des-Area">
                        <div class="item-title">4th Title</div>
                        <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                    </div>
                </div>
            </div>    
                <!-- Desert Item -->

                    <div class="desert-cuisine">    
                        <div class="desertIitem">
                            <div class="img"><img src="images/chi01.jpg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">1st Title</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                            </div>
                        </div>

                        <div class="desertIitem">
                            <div class="img"><img src="images/chi02.jpg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">2nd Title</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                            </div>
                        </div>

                        <div class="desertIitem">
                            <div class="img"><img src="images/chi03.jpeg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">3rd Title</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                            </div>
                        </div>

                        <div class="desertIitem">
                            <div class="img"><img src="images/chi04.jpg" alt=""></div>
                            <div class="des-Area">
                                <div class="item-title">4th Title</div>
                                <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

                            </div>
                        </div>
                    </div>            
            </div>
        </div>
    </div>

CodePudding user response：

There are some problems with your understanding of a class compared to an element in your javascript code.

You are trying to call javascript functions for an element on a query you made on a class. For example, in the query below, you're returning a class to the variable asianCuisine when you intended to return an element. The "." returns a class and a "#" returns an element. In html, an element's id attribute relates to the "#" and the element's class attribute relates to the "."

var asianCuisine = document.querySelector(".asian-cuisine");
var asianCuisine = document.querySelector("#asian-cuisine");

You must also remove hidden and active attributes at the proper time.

Try the code in the jsfiddle below. It should get you where you need to be for a good start on your project. Please do more research into html classes & ids and also how they related to javascript & css "#" vs. "."

Keep in mind that there are much easier ways to do this but if someone just gives some fancy code you won't learn anything.

Code that works ---> https://jsfiddle.net/larrygrobertson/y52m1ok6/54/

I have modified your code and attempted to keep as much as I could intact.

HTML:

  <div class="home-container">
    <div class="title">Restaurent Menu</div>
    <div class="underline"></div>
    <div class="menu-btns">
      <button id="all" class="all">All Items</button>
      <button id="asian" class="asian">Asian Cuisine</button>
      <button id="chinese" class="chinese">Chinese Item</button>
      <button id="desi" class="desi">Desi Item</button>
      <button id="desert" class="desert">Desert Item</button>
    </div>


    <!-- item display Area -->
    <div class="display-Area">

      <!-- Asian Cuisine -->
      <div id="asian-cuisine" class="asian-cuisine">
        <div class="asianItem">
          <div class="img"><img src="images/asian01.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">1st Title Asian</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
          </div>
        </div>

        <div class="asianItem">
          <div class="img"><img src="images/asian02.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">2nd Title Asian</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
          </div>
        </div>

        <div class="asianItem">
          <div class="img"><img src="images/asian02.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">3rd Title Asian</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
          </div>
        </div>

        <div class="asianItem">
          <div class="img"><img src="images/asian04.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">4th Title Asian</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
          </div>
        </div>
      </div>

      <!--Chinese Item  -->
      <div id="chinese-cuisine" class="chinese-cuisine">

        <div class="chineseItem">
          <div class="img"><img src="images/chi01.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">1st Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="chineseItem">
          <div class="img"><img src="images/chi02.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">2nd Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="chineseItem">
          <div class="img"><img src="images/chi03.jpeg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">3rd Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="chineseItem">
          <div class="img"><img src="images/chi04.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">4th Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

      </div>

      <!-- Desi Item -->

      <div id="desi-cuisine" class="desi-cuisine">
        <div class="desiItem">
          <div class="img"><img src="images/desi01.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">1st Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="desiItem">
          <div class="img"><img src="images/desi02.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">2nd Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="desiItem">
          <div class="img"><img src="images/desi03.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">3rd Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="desiItem">
          <div class="img"><img src="images/desi04.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">4th Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>
      </div>
      <!-- Desert Item -->

      <div id="desert-cuisine" class="desert-cuisine">
        <div class="desertIitem">
          <div class="img"><img src="images/chi01.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">1st Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="desertIitem">
          <div class="img"><img src="images/chi02.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">2nd Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="desertIitem">
          <div class="img"><img src="images/chi03.jpeg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">3rd Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>

        <div class="desertIitem">
          <div class="img"><img src="images/chi04.jpg" alt=""></div>
          <div class="des-Area">
            <div class="item-title">4th Title</div>
            <div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}


/* working with the title */

.title {
  text-align: center;
  font-size: 4rem;
  font-family: 'Poppins', sans-serif;
}

.underline {
  position: absolute;
  width: 600px;
  height: 2px;
  background-color: black;
  left: 50%;
  transform: translate(-50%);

}

/* working with the menu buttons */

.menu-btns {
  text-align: center;
  margin-top: 30px;

}


.menu-btns button {
  padding: 10px 20px;
  margin-left: 30px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  border: none;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

.menu-btns button:hover {
  background-color: chartreuse;
  transition: 0.5s ease-out;
}

/* menu display area */

/* .display-Area{
    margin-top: 60px;
    margin-left: 10%;
    display: grid;
    grid-template-columns: auto auto;
} */
.display-Area img {
  /* border: 1px solid black; */
  width: 500px;
  height: 300px;
  border-radius: 5px;
  box-shadow: 0px 0px 15px 0px black;

  cursor: pointer;
}

.display-Area img:hover {

  transform: scale(1.1);
  transition: 0.5s ease-out;

}

/* display flex for every cuisine */

.asian-cuisine {
  /* border: 2px solid black; */
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  transition: 0.5s ease-out;
}

.chinese-cuisine {
  /* border: 2px solid black; */
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  transition: 0.5s ease-out;
}

.desi-cuisine {
  /* border: 2px solid black; */
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  transition: 0.5s ease-out;
}

.desert-cuisine {
  /* border: 2px solid black; */
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  transition: 0.5s ease-out;
}

/* for the javascript manipulation class */



.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  transition: 0.5s all ease-out;

}

.hidden {
  display: none;
  transition: 0.5s all ease-out;
}

JAVASCRIPT:

    // selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);

// selecting all menu button
var allMenu = document.querySelector("#all");

// selecting asian menu item
var asianMenu = document.querySelector("#asian");

// selecting chinese menu item 
var chnsMenu = document.querySelector("#chinese");

// selecting desi menu item 
var desiMenu = document.querySelector("#desi");

// selecting desert menu item 
var desertMenu = document.querySelector("#desert");

// selecting the cuisine DIV

var asianCuisine = document.querySelector("#asian-cuisine");

var chineseCuisine = document.querySelector("#chinese-cuisine");

var desiCuisine = document.querySelector("#desi-cuisine");

var desertCuisine = document.querySelector("#desert-cuisine");






// add eventlister to all the buttons

for (let i = 0; i < menuDiv.length; i  ) {
  menuDiv[i].addEventListener("click", function(e) {

    //e.target.preventDefault;

    if (e.target == asianMenu) {
      console.log(asianCuisine);
      removeAllActive(asianCuisine);
      removeAllHidden(asianCuisine);
      asianCuisine.classList.add("active");
      chineseCuisine.classList.add("hidden");
      desiCuisine.classList.add("hidden");
      desertCuisine.classList.add("hidden");

    }

    if (e.target == chnsMenu) {
      console.log("Kazi");
      removeAllActive(chineseCuisine);
      removeAllHidden(chineseCuisine);
      chineseCuisine.classList.add("active");
      desiCuisine.classList.add("hidden");
      desertCuisine.classList.add("hidden");
      asianCuisine.classList.add("hidden");
    }

    if (e.target == desiMenu) {
      console.log("Kazi");
      removeAllActive(desiCuisine);
      removeAllHidden(desiCuisine);
      desiCuisine.classList.add("active");
      chineseCuisine.classList.add("hidden");
      desertCuisine.classList.add("hidden");
      asianCuisine.classList.add("hidden");
    }

    if (e.target == desertMenu) {
      console.log("Kazi");
      removeAllActive(desertCuisine);
      removeAllHidden(desertCuisine);
      desertCuisine.classList.add("active");
      chineseCuisine.classList.add("hidden");
      desiCuisine.classList.add("hidden");
      asianCuisine.classList.add("hidden");
    }

    if (e.target == allMenu) {
      console.log("Kazi");
      desertCuisine.classList.replace("hidden", "active");
      chineseCuisine.classList.replace("hidden", "active");
      desiCuisine.classList.replace("hidden", "active");
      asianCuisine.classList.replace("hidden", "active");
    }
  })
}


function removeAllActive(e) {
  // Get the first sibling to this button
  var sibling = e.parentNode.firstChild;
  // Loop through each sibling and remove active
  while (sibling) {
    if (sibling.nodeType === 1 && sibling !== 'elem') {
      // Remove active class
      sibling.classList.remove("active");
    }
    sibling = sibling.nextSibling
  }
}


function removeAllHidden(e) {
  // Get the first sibling to this button
  var sibling = e.parentNode.firstChild;
  // Loop through each sibling and remove active
  while (sibling) {
    if (sibling.nodeType === 1 && sibling !== 'elem') {
      // Remove active class
      sibling.classList.remove("hidden");
    }
    sibling = sibling.nextSibling
  }
}