Desktop only with vanilla javascript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Though like you said only desktop. The layout is good. But keep in mind working on that mobile state okay.

  First, points for adding overflow on the accordion container. To remove the scrollbar beside it, just add

  /* Hide scrollbar for Chrome, Safari and Opera */
  .example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  

  Just change the selector. That is from w3schools.

  Regarding your query.

  The reason for that is, you are querying all the .btn right. But, forEach only works on an array. So in this const btn = document.querySelectorAll(".btn"); declaration. You should declare it like `const btn = Array.from(document.querySelectorAll(".btn"));

  Then this loop will run now.

  btn.forEach(button => {
     button.addEventListener("click", function () {
        text[i].classList.toggle("hidden");
        que[i].classList.toggle("bold");
        arrow[i].classList.toggle("rotate");
      })
  })
  

  IF need more help, just drop it here okay^^

  0

  ---

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  @pikamart

  Thank you so much for your reply, I spent a lot of time trying to refactor for loop to forEach and just couldn't get it to work. I even written the function exactly same as your answer but still I was missing the point why it does not work. Thank you! Lesson's learned and I will now remember it for the future :) Thank you for the tip with scrollbar as well. In regards to mobile version I really need to focus on that as that part or start mobile first approach as it annoys me a lot ;)

  0

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  @pikamart Hiya, I tried to implement your solution to forEach method, unfortunately I cannot get it to work still. Can you have a look at my code and point me to what I am doing wrong? Thank you!

  
  btns.forEach((btn) => {
    btn.addEventListener("click", function (e, i) {
      texts[i].classList.toggle("hidden");
      ques[i].classList.toggle("bold");
      arrows[i].classList.toggle("rotate");
    });
  }); ```
  

  0

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  One part got missing:

  const btns = Array.from(document.querySelectorAll(".btn"));

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @axseinga Hey, did it work right now after adding that missing part? But I think that will just fine, since that Array.from converts those iterable into array. Let me know again if something prompts error okay^

  0

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  @pikamart It was missing only here, not in my code :) The error I get is

  js.js:8 Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLDivElement.<anonymous> (js.js:8)

  No matter how I approached the problem before and try to refactor it to forEach I was always getting the same error that the 'texts' with index is undefined. Thank you.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @axseinga Okay so try this one. Remember to use the const btns = Array.from(document.querySelectorAll(".btn")); okay.

  Now for the forEach loop, I think the reason that you are getting that typeError is that, you need index right, an index to use to target those queried Items.

  Use this one.

  btns.forEach((btn, index) => {
    btn.addEventListener("click", () => {
      texts[index].classList.toggle("hidden");
      ques[index].classList.toggle("bold");
      arrows[index].classList.toggle("rotate");
    });
  });
  

  0

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  Dear @pikamart, thank you so much! I was getting index from second argument from event listener ( "click", function (_, i) ) instead on of forEach itself! I am so ashamed now :D Thank you so much, I learned a lot from you already :)

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @axseinga Glad that I helped you with it :>>

  and don't be ashamed okay, we've all been there, being confused at those indexing right. Thank you as well for not giving up on this problem. Really good job^^

  0