how to do hide/show element on click?

October 16, 2022

Should I use jquery? i want to hide/show p element when i click class faq-q

how does it work?

this is what it look like

html

css

.faq {
    flex-direction: column;
    margin-top: 1.5rem;
    display: flex;
}

.faq-item {
    box-shadow: 0 0 1.25rem rgb(0 0 0 / 8%);
    border-radius: 0.3125rem;
    background: #e3eaf4;
    margin-top: 1.25rem;
}

.faq-q {
    padding: 0 3.125rem 0 2.5rem;
    font-size: 1rem;
    align-items: center;
    color: #000;
    height: 5rem;
    margin-bottom: 0;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.faq-ans {
    padding: 0 2.5rem 2.5rem;
}

>Solution :

Should I use jquery? i want to hide/show p element when i click class faq-q

For a simple task like this, I think you don’t need jQuery. Just simple querySelectorAll() and addEventListener() methods are enough

document.querySelectorAll(".faq-q").forEach(el => {
  el.addEventListener("click", (e) => {
    el.parentElement.querySelector('.faq-ans > p').style.display =
      el.parentElement.querySelector('.faq-ans > p').style.display == "none" ? "block" : "none";
  })
});

.faq {
  flex-direction: column;
  margin-top: 1.5rem;
  display: flex;
}

.faq-item {
  box-shadow: 0 0 1.25rem rgb(0 0 0 / 8%);
  border-radius: 0.3125rem;
  background: #e3eaf4;
  margin-top: 1.25rem;
}

.faq-q {
  padding: 0 3.125rem 0 2.5rem;
  font-size: 1rem;
  align-items: center;
  color: #000;
  height: 5rem;
  margin-bottom: 0;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.faq-ans {
  padding: 0 2.5rem 2.5rem;
}

<div class="faq">
  <div class="faq-iten is-active">
    <h5 class="faq-q">When was the company founded?<i class="fa-solid fa-chevron-down"></i></h5>
    <div class="faq-ans">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat porro ipsam delectus, blanditiis expedita cupiditate.</p>
    </div>
  </div>
</div>