script in Javascript or Jquery for click event

Question

I started it in javascript but if someone have better in Jquery i'll take it. I explain the context: i have a few questions and each ones has answers, i would like to click on a question and then the answers appear. I already did this:

document.querySelector(".question").onclick = function() {
if (window.getComputedStyle(document.querySelector('.item_group_resultat')).display=='none'){
document.querySelector(".item_group_resultat").style.display="block";
} 
else {
document.querySelector(".item_group_resultat").style.display="none";
}
}

the problem is that the only one works but not others.

here is the html code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <div class="content">
        <h1 class="titre"></h1>
        <div class="navigation" id="style-7">
            <ul class="item_group">
                <li class="item titre"></li>
                <li class="item">
                    <a class="question" href="#"></a>
                </li>
                <li class="item">
                    <a class="question" href="#"></a>
                </li>
                <li class="item">
                    <a class="question" href="#"></a>
                </li>
                <li class="item">
                    <a class="question" href="#"></a>
                </li>
                <li class="item">
                    <a class="question" href="#"></a>
                </li>
            </ul>
        </div>
        <div class="resultat">
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat"></li>
              <li class="item content_resultat"></li>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat"></li>
                <li class="item content_resultat"></li>
            </ul>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat"></li>
                <li class="item content_resultat"></li>
            </ul>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat"></li>
                <li class="item content_resultat"></li>
            </ul>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat"></li>
                <li class="item content_resultat"></li>

        </div>
    </div>
</body>
</html>

well `document.querySelector` is going to find the first element that matches, it has no clue it supposed to match another one. You need to code it so it finds the related element. Since you did not share HTML code, it is hard to give an answer. — epascarello, Feb 26 '20 at 15:29
`querySelector` only ever returns a maximum of _one_ element. You need `querySelectorAll`, if you want to select _multiple_ elements based on a class. And you will need to _loop over_ the resulting set, and attach your click handler to each one individually. Yes, jQuery makes this a lot easier - but if you want to go that route, then you need to go read up on it yourself a bit first. And if you still have problems, then give us a proper [mre], before any further discussion of the issue. — CBroe, Feb 26 '20 at 15:29
Please share your simple HTML code to know how questions & answers are displayed. — palaѕн, Feb 26 '20 at 15:32

Kostas Minaidis · Accepted Answer · 2020-02-26T19:53:42.447

Here's the update vanilla JS solution:

<div class="content">
        <h1 class="titre"></h1>
        <div class="navigation" id="style-7">
            <ul class="item_group">
                <li class="item titre">Q</li>
                <li class="item">
                    <a class="question" href="#">1</a>
                </li>
                <li class="item">
                    <a class="question" href="#">2</a>
                </li>
                <li class="item">
                    <a class="question" href="#">3</a>
                </li>
                <li class="item">
                    <a class="question" href="#">4</a>
                </li>
                <li class="item">
                    <a class="question" href="#">5</a>
                </li>
            </ul>
        </div>
        <div class="resultat">
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat">1</li>
              <li class="item content_resultat">1</li>
            </ul>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat">2</li>
                <li class="item content_resultat">2</li>
            </ul>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat">3</li>
                <li class="item content_resultat">3</li>
            </ul>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat">4</li>
                <li class="item content_resultat">4</li>
            </ul>
            <ul class="item_group item_group_resultat">
                <li class="item titre_resultat">5</li>
                <li class="item content_resultat">5</li>

        </div>
    </div>

div {
  border: 1px solid black;
  padding: 20px;
}
.question {
  border: 1px solid black;
  padding: 0 40px;
}
.item_group_resultat {
  display: none;
}
.active {
  display: block;
}

document.querySelector(".navigation").addEventListener("click", function(e){

   let currentIdx;
   Array.from(this.querySelectorAll(".question")).some( (q,idx) => ( q === e.target ) ? ( currentIdx = idx, true ) : false );
   let prev = document.querySelector(".item_group_resultat.active");
   document.querySelectorAll(".item_group_resultat")[currentIdx].classList.toggle("active");
   prev && prev.classList.remove("active");

});

Codepen

Hi 'im back i would like to get another help, i would like to script a scroll to. When i click on a question it will scroll to the active result, could you help me ? — Esteban, Mar 05 '20 at 08:48
These two links might be a good start (JS/jQuery): https://usefulangle.com/post/156/javascript-scroll-to-element https://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Kostas Minaidis, Mar 05 '20 at 11:43

score 0 · Answer 2 · answered Feb 26 '20 at 15:50

0

Using jQuery you can do this:

$('.question').click(function() {
   var index = $(this).parent().index();
   $('.item_group_resultat').eq(index).toggle().siblings().hide();
});

$(this).parent().index() will get the index of clicked .question
and the toggle() will toggle between hide and show for the item_group_resultat present in the same index but inside different div.

answered Feb 26 '20 at 15:50

palaѕн

72,112
17
116
136

thanks a lot that work well. Do you know how to when i click in a other question the previous answer disappear ? – Esteban Feb 26 '20 at 16:00

script in Javascript or Jquery for click event

2 Answers2