Toggling does not work after I categorized questions

Question

I am a beginner and therefore learning by working on projects. This is a FAQ project which I am struggling with.

There are questions and answers and I have divided them into categories. If I choose first category - “all” - all questions displays or when I click on the other category, only questions related to this category display and others gets hidden.

Similarly, when I click on a question, it’s respective answer should display or hide as I toggle. This is what I meant to achieve.

Now, when the page loads and I click on the questions, their respective answers hides and displays (toggle) - works fine as I expected. Note: It only works when I refresh the page.

But my problem is as I click on the categories including “all” , functionality of show and hide questions disappears. It does not work with any category.

In other words, I click on a category and then click on a question to check the answer, toggling does not work at all.

Here is my code (faqsearch):

Please help me find solutions for these two questions:

1. What and where am I doing wrong?
2. How to solve it?

Thank you!

const database = [{
    id: 1,
    question: `Maecenas luctus purus in enim vestibulum pretium. Nam in turpis nec? `,
    answer: `Maecenas luctus purus in enim vestibulum pretium. Aliquam erat volutpat. Vivamus auctor euismod metus nec convallis. Nam in turpis nec tortor porta pretium non vel nunc. Praesent varius ac enim eget viverra. Donec et volutpat diam, id hendrerit lacus. Suspendisse feugiat viverra mattis. Etiam pulvinar dolor id consectetur pretium.`,
    img: [""],
    category: "newdelhi",
  },

  {
    id: 4,
    question: `Curabitur augue risus, pulvinar in elementum vitae?`,
    answer: `Vivamus mattis commodo felis, sed scelerisque turpis auctor in. Nulla facilisi. Etiam id rhoncus eros. Integer eu sollicitudin nisi. Aliquam ut massa nec sem laoreet tempor non eu augue. Sed gravida ultrices porta. Ut vel metus tempor, convallis urna at, vehicula lectus.`,
    img: [""],
    category: "canberra",
  },
  {
    id: 5,
    question: `Proin aliquam pretium congue. Sed fringilla venenatis dictum?`,
    answer: `Nam interdum viverra purus quis sagittis. Nunc sed euismod quam, non volutpat diam. Fusce turpis metus, iaculis nec ultrices et, fringilla a felis. In vestibulum, quam eget fermentum ornare, enim ante vehicula est, vel pulvinar odio enim in nibh. Integer eget purus augue.`,
    img: [""],
    category: "newdelhi",
  },
  {
    id: 8,
    question: `Nullam a purus ac felis aliquam eleifend?`,
    answer: `Curabitur augue risus, pulvinar in elementum vitae, malesuada et lacus. Ut id ante id neque semper interdum. Proin euismod dolor nec dapibus tempus. Suspendisse et eros non turpis feugiat sodales. Curabitur nec posuere sem.`,
    img: [""],
    category: "canberra",
  },
];

// class selectors
const commonIssues = document.querySelector(".common-issues");
const topics = document.querySelector(".topics");
const form = document.querySelector(".search-form");
const input = document.getElementById("search");
const navBtns = document.querySelectorAll(".nav-btn");
const icons = document.querySelectorAll(".a-icons");

// function displayManual
function displayQNS(arrayData) {
  const manuals = arrayData
    .map((ad) => {
      return `<div class="issues-solutions">
      <p class="issue-item">
      ${ad.question}<i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </p>
    <p class="solution-item">
      ${ad.answer}
    </p>
    <div class="solution-item">
    ${ad.img.map((i) => {
      return `<img src="${i}" class="image-item"/>`;
    })}</div>
    </div>`;
    })
    .join("");
  topics.innerHTML = manuals;

}
displayQNS(database);

// class selectors
const questions = document.querySelectorAll(".issue-item");
const answers = document.querySelectorAll(".solution-item");
const questionAnswers = document.querySelectorAll(".issues-solutions");

//function filter questions
function filterCategory(navs) {
  navs.forEach((btns) => {
    btns.addEventListener("click", (btn) => {
      const btnCategory = btn.currentTarget.dataset.id;
      const itemCategory = database.filter((item) => {
        if (btnCategory === item.category) {
          return item.category;
        }
      });
      if (btnCategory === "all") {
        displayQNS(database);
      } else {
        displayQNS(itemCategory);
      }
    });
  });
}
filterCategory(navBtns);

// function show hide solutions
function toggleSolutions() {
  questions.forEach((q) => {
    q.addEventListener("click", (btn) => {
      const current = btn.currentTarget;
      current.classList.toggle("item-bg");
      current.childNodes[1].classList.toggle("hide-item");
      current.childNodes[3].classList.toggle("show-item");
      answers.forEach((a) => {
        if (current.parentElement === a.parentElement) {
          a.classList.toggle("show-item");
        }
      });
    });
  });
}
toggleSolutions();

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
:root {
  --hover-color: #edf2f7;
  --primary-text: #2d3748;
  --secondary-text: #eb7304;
  --border-color: #cbd5e0;
  --white-color: #fff;
}

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

body {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: var(--primary-text);
  overflow-x: hidden;
}

.container {
  padding: 1rem;
  height: 100%;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
}

.related-links {
  margin: 1rem;
  padding: 0.5rem;
  justify-self: center;
}

.links {
  list-style-type: none;
}

.title {
  margin: 0.5rem;
  padding: 0.5rem;
  font-size: 1.1rem;
  font-weight: 400;
}

.link-item {
  margin: 0.5rem;
  padding: 0.5rem 2rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
}

.link-item:hover {
  border-radius: 5px;
  color: var(--white-color);
  background-color: var(--secondary-text);
}

.search-section {
  width: 90%;
  margin: 1rem;
  padding: 0.5rem;
  justify-self: center;
}

.search-form {
  height: 10rem;
  margin: 0.5rem;
  padding: 0.5rem;
  text-align: center;
}

.input-field {
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
}

.search-icon {
  font-size: 1.1rem;
  color: gray;
}

#search {
  width: 70%;
  outline: none;
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 400;
  background: none;
  border-radius: 5px;
}

.common-issues {
  margin: 0.5rem;
  /* border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color); */
}

.nav-bar {
  padding: 0.5rem;
  text-align: center;
  border-radius: 5px;
  background-color: var(--secondary-text);
}

.nav-btn {
  margin: 0.5rem;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: var(--white-color);
}

.nav-btn:hover,
.nav-btn:focus {
  border-radius: 5px;
  color: var(--white-color);
  background-color: var(--primary-text);
  box-shadow: 0 10px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.topics {
  cursor: pointer;
}

.issue-item {
  margin: 0.5rem;
  padding: 1rem;
  font-size: 1rem;
  overflow-wrap: break-word;
  cursor: pointer;
  line-height: 2rem;
  font-weight: 500;
  color: var(--secondary-text);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
}

.item-bg {
  background-color: #212e36;
  color: var(--white-color);
  border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.solution-item {
  margin: 0.5rem;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: text;
  line-height: 2rem;
  font-weight: 400;
  display: none;
}

.image-item {
  width: 100%;
  margin-right: 0.5rem;
  cursor: pointer;
}

.show-item {
  display: inline-block;
}

.hide-item {
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  padding: 0.5rem;
}

.fa-minus,
.fa-plus {
  position: absolute;
  right: 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0.5rem;
    grid-template-columns: 1fr;
  }
  .related-links,
  .search-section {
    margin: 0.5rem;
  }
  #search {
    width: 50%;
  }
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  <title>FAQ</title>
</head>

<body>
  <div class="container">
    <main class="search-section">
      <div class="common-issues">
        <nav class="nav-bar">
          <button class="nav-btn" type="button" data-id="all">All</button>
          <button class="nav-btn" type="button" data-id="newdelhi">New Delhi</button>
          <button class="nav-btn" type="button" data-id="canberra">Canberra</button>
        </nav>
        <div class="topics"></div>
      </div>
      <!-- common issues ends here -->
    </main>
    <!-- container ends here -->
   </div>
</body>

Answer 1

The problem is pretty simple.

When changing category, you are removing/adding element to the DOM.

But, in your code you only query for the element on the page once when your application load.

// class selectors
const questions = document.querySelectorAll(".issue-item");
const answers = document.querySelectorAll(".solution-item");
const questionAnswers = document.querySelectorAll(".issues-solutions");

So when you update the list, You have to also refresh your list of questions/answer etc:

I made a quick exemple (there are other problem in the code, but this might guide you) :

const database = [
  {
    id: 1,
    question: `Maecenas luctus purus in enim vestibulum pretium. Nam in turpis nec? `,
    answer: `Maecenas luctus purus in enim vestibulum pretium. Aliquam erat volutpat. Vivamus auctor euismod metus nec convallis. Nam in turpis nec tortor porta pretium non vel nunc. Praesent varius ac enim eget viverra. Donec et volutpat diam, id hendrerit lacus. Suspendisse feugiat viverra mattis. Etiam pulvinar dolor id consectetur pretium.`,
    img: [""],
    category: "newdelhi",
  },
  {
    id: 2,
    question: `Donec et volutpat diam, id hendrerit lacus. Etiam pulvinar dolor id consectetur pretium.?`,
    answer: `Cras pellentesque sem lectus, ut accumsan velit venenatis nec. Sed condimentum eleifend eros in tincidunt. Suspendisse sit amet sapien nec velit rhoncus vestibulum. Vivamus accumsan lorem ac est ultrices, at sagittis neque hendrerit. Sed lacinia pellentesque arcu, ut tristique neque maximus nec. Maecenas pretium lobortis purus eget vehicula. Mauris scelerisque massa eget lorem dignissim, vitae rhoncus dui viverra. Integer sed nisi ac nisi posuere luctus rutrum at velit. Proin pellentesque scelerisque consectetur. Morbi ullamcorper elit sit amet diam euismod, ac eleifend tellus viverra. Sed aliquam ipsum vel est sagittis ullamcorper. Sed blandit nec augue vel varius. Nullam hendrerit quam vitae sem interdum, eu interdum enim finibus. Praesent maximus lacus ac nulla tristique, in luctus ligula tempor. Ut lacinia mauris id risus ultrices faucibus. Phasellus nec erat odio.`,
    img: [""],
    category: "washington",
  },
  {
    id: 3,
    question: `Sed aliquam ipsum vel est sagittis ullamcorper. Sed blandit nec augue vel varius?`,
    answer: `Vivamus accumsan lorem ac est ultrices, at sagittis neque hendrerit. Sed lacinia pellentesque arcu, ut tristique neque maximus nec. Maecenas pretium lobortis purus eget vehicula. Mauris scelerisque massa eget lorem dignissim, vitae rhoncus dui viverra. Integer sed nisi ac nisi posuere luctus rutrum at velit. Proin pellentesque scelerisque consectetur. Morbi ullamcorper elit sit amet diam euismod, ac eleifend tellus viverra. Sed aliquam ipsum vel est sagittis ullamcorper. Sed blandit nec augue vel varius. Nullam hendrerit quam vitae sem interdum, eu interdum enim finibus. Praesent maximus lacus ac nulla tristique, in luctus ligula tempor. Ut lacinia mauris id risus ultrices faucibus. Phasellus nec erat odio.`,
    img: [""],
    category: "london",
  },
  {
    id: 4,
    question: `Curabitur augue risus, pulvinar in elementum vitae?`,
    answer: `Vivamus mattis commodo felis, sed scelerisque turpis auctor in. Nulla facilisi. Etiam id rhoncus eros. Integer eu sollicitudin nisi. Aliquam ut massa nec sem laoreet tempor non eu augue. Sed gravida ultrices porta. Ut vel metus tempor, convallis urna at, vehicula lectus.`,
    img: [""],
    category: "canberra",
  },
  {
    id: 5,
    question: `Proin aliquam pretium congue. Sed fringilla venenatis dictum?`,
    answer: `Nam interdum viverra purus quis sagittis. Nunc sed euismod quam, non volutpat diam. Fusce turpis metus, iaculis nec ultrices et, fringilla a felis. In vestibulum, quam eget fermentum ornare, enim ante vehicula est, vel pulvinar odio enim in nibh. Integer eget purus augue.`,
    img: [""],
    category: "newdelhi",
  },
  {
    id: 6,
    question: `Aenean sed metus sapien. In vulputate interdum est, ac iaculis leo pharetra vitae?`,
    answer: `Quisque non libero quis lorem dapibus varius sit amet non velit. Phasellus sed massa vitae nisl bibendum facilisis. Curabitur augue risus, pulvinar in elementum vitae, malesuada et lacus. Ut id ante id neque semper interdum. Proin euismod dolor nec dapibus tempus. Suspendisse et eros non turpis feugiat sodales. Curabitur nec posuere sem.`,
    img: [""],
    category: "washington",
  },
  {
    id: 7,
    question: `Fusce eget purus odio. In dictum tortor at est lobortis accumsan?`,
    answer: `Praesent rutrum, purus eget mollis semper, nisl mauris mollis urna, bibendum vehicula lorem magna non lacus. Aliquam erat volutpat. Vivamus rutrum porta ornare. Nam sem purus, rhoncus sed accumsan vel, venenatis ac sapien. Quisque sodales nisl eget metus convallis tincidunt.`,
    img: [""],
    category: "london",
  },
  {
    id: 8,
    question: `Nullam a purus ac felis aliquam eleifend?`,
    answer: `Curabitur augue risus, pulvinar in elementum vitae, malesuada et lacus. Ut id ante id neque semper interdum. Proin euismod dolor nec dapibus tempus. Suspendisse et eros non turpis feugiat sodales. Curabitur nec posuere sem.`,
    img: [""],
    category: "canberra",
  },
];

// class selectors
const commonIssues = document.querySelector(".common-issues");
const topics = document.querySelector(".topics");
const form = document.querySelector(".search-form");
const input = document.getElementById("search");
const navBtns = document.querySelectorAll(".nav-btn");
const icons = document.querySelectorAll(".a-icons");

// function displayManual
function displayQNS(arrayData) {
  const manuals = arrayData
    .map((ad) => {
      return `<div class="issues-solutions">
      <p class="issue-item">
      ${ad.question}<i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </p>
    <p class="solution-item">
      ${ad.answer}
    </p>
    <div class="solution-item">
    ${ad.img.map((i) => {
      return `<img src="${i}" class="image-item"/>`;
    })}</div>
    </div>`;
    })
    .join("");
  topics.innerHTML = manuals;
  toggleSolutions();
}
displayQNS(database);

//function filter questions
function filterCategory(navs) {
  navs.forEach((btns) => {
    btns.addEventListener("click", (btn) => {
      const btnCategory = btn.currentTarget.dataset.id;
      const itemCategory = database.filter((item) => {
        if (btnCategory === item.category) {
          return item.category;
        }
      });
      if (btnCategory === "all") {
        displayQNS(database);        
      } else {
        displayQNS(itemCategory);  
      }
    });
  });
}
filterCategory(navBtns);

// function show hide solutions
function toggleSolutions() {
  const questions = document.querySelectorAll(".issue-item");
  const answers = document.querySelectorAll(".solution-item");
  const questionAnswers = document.querySelectorAll(".issues-solutions");

  questions.forEach((q) => {
    q.addEventListener("click", (btn) => {
      const current = btn.currentTarget;
      current.classList.toggle("item-bg");
      current.childNodes[1].classList.toggle("hide-item");
      current.childNodes[3].classList.toggle("show-item");      
      answers.forEach((a) => {
        if (current.parentElement === a.parentElement) {
          a.classList.toggle("show-item");          
        }
      });
    });
  });
}

// // function search texts
// function filteredItems() {
//   const value = input.value;
//   let paragraph;
//   answers.forEach((a) => {
//     paragraph = a.textContent;
//     const regex = new RegExp(value);
//     paragraph.match(regex, "gi");
//   });
//   topics.innerHTML = `<p class="item">${paragraph} </p>`;
// }

// // event listerns
// form.addEventListener("submit", (e) => {
//   e.preventDefault();
//   filteredItems();
// });

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

:root {
  --hover-color: #edf2f7;
  --primary-text: #2d3748;
  --secondary-text: #eb7304;
  --border-color: #cbd5e0;
  --white-color: #fff;
}

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

body {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: var(--primary-text);
  overflow-x: hidden;
}

.container {
  padding: 1rem;
  height: 100%;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
}

.related-links {
  margin: 1rem;
  padding: 0.5rem;
  justify-self: center;
}

.links {
  list-style-type: none;
}

.title {
  margin: 0.5rem;
  padding: 0.5rem;
  font-size: 1.1rem;
  font-weight: 400;
}

.link-item {
  margin: 0.5rem;
  padding: 0.5rem 2rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
}

.link-item:hover {
  border-radius: 5px;
  color: var(--white-color);
  background-color: var(--secondary-text);
}

.search-section {
  width: 90%;
  margin: 1rem;
  padding: 0.5rem;
  justify-self: center;
}

.search-form {
  height: 10rem;
  margin: 0.5rem;
  padding: 0.5rem;
  text-align: center;
}

.input-field {
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
}

.search-icon {
  font-size: 1.1rem;
  color: gray;
}

#search {
  width: 70%;
  outline: none;
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 400;
  background: none;
  border-radius: 5px;
}

.common-issues {
  margin: 0.5rem;
  /* border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color); */
}

.nav-bar {
  padding: 0.5rem;
  text-align: center;
  border-radius: 5px;
  background-color: var(--secondary-text);
}

.nav-btn {
  margin: 0.5rem;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: var(--white-color);
}

.nav-btn:hover,
.nav-btn:focus {
  border-radius: 5px;
  color: var(--white-color);
  background-color: var(--primary-text);
  box-shadow: 0 10px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.topics {
  cursor: pointer;
}

.issue-item {
  margin: 0.5rem;
  padding: 1rem;
  font-size: 1rem;
  overflow-wrap: break-word;
  cursor: pointer;
  line-height: 2rem;
  font-weight: 500;
  color: var(--secondary-text);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
}

.item-bg {
  background-color: #212e36;
  color: var(--white-color);
  border-radius: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.solution-item {
  margin: 0.5rem;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: text;
  line-height: 2rem;
  font-weight: 400;
  display: none;
}

.image-item {
  width: 100%;
  margin-right: 0.5rem;
  cursor: pointer;
}

.show-item {
  display: inline-block;
}

.hide-item {
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  padding: 0.5rem;
}

.fa-minus,
.fa-plus {
  position: absolute;
  right: 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0.5rem;
    grid-template-columns: 1fr;
  }
  .related-links,
  .search-section {
    margin: 0.5rem;
  }
  #search {
    width: 50%;
  }
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>FAQ</title>
  </head>
  <body>    
    <div class="container">
      <aside class="related-links">
        <p class="title">Related Links</p>
        <ul class="links">
          <li class="link-item">New Delhi</li>
          <li class="link-item">Washington DC</li>
          <li class="link-item">London</li>
          <li class="link-item">Canberra</li>
        </ul>
      </aside>
      <!-- related links ends here -->
      <main class="search-section">
        <form class="search-form">    
          <span class="input-field">
            <i class="fas fa-search search-icon"></i>
          <input
            type="search"
            name="search"
            id="search"
            placeholder="Type to begin..." 
          />
          </span>          
        </form>
        <!-- form ends here -->
        <div class="common-issues">
          <nav class="nav-bar">
            <button class="nav-btn" type="button" data-id="all">All</button>
            <button class="nav-btn" type="button" data-id="newdelhi">New Delhi</button>
            <button class="nav-btn" type="button" data-id="washington">Washington DC</button>
            <button class="nav-btn" type="button" data-id="london">London</button>
            <button class="nav-btn" type="button" data-id="canberra">Canberra</button>
          
          </nav>
          <div class="topics"></div>
      </div>
        <!-- common issues ends here -->
    </main>
    <!-- container ends here -->
    <script src="app.js"></script>
  </body>