他の要素をクリックすると、ある要素の表示を切り替える

Question

私はp要素と隠れ要素を持っています。 id/class = "p1"などのp要素をクリックすると、id/class = "pre1"などのpre要素の表示が変更されるようにしたいと考えています。

これは私のjavascriptのコードです：

var p = 1; 
setInterval(function() { 
    if(p <= document.querySelectorAll(".show").length) { 
     document.getElementById("display-pre"+p).onclick = function() { 
     console.log(p); 
     if(document.getElementById("display-pre-a"+p).style.display == '') { 
      document.getElementById("display-pre-a"+p).style.display = 'block'; 
     } else if(document.getElementById("display-pre-a"+p).style.display == 'block') { 
      document.getElementById("display-pre-a"+p).style.display = 'none'; 
     } 
     }; 
     p++; 
     if(p > document.querySelectorAll(".show").length) {p = 1;} 
    } 
}, 100); 

作品のこのコードのようなものではなく、本当に。時には他の要素を変えたり、時には何もしません。

これは私の完全なJavaScriptコードです：

<div id="test-div"> 
    <input type="text" id="search"/> 
    <button type="submit" onclick="query()">Submit</button> 
    <button type="submit" onclick="newInput()">New</button> 
    <button type="submit" onclick="remove()">Delete</button> 
    <button type="submit" onclick="deleteAll()">Delete All</button> 
     <div class="query-div"><p class="query-p">Test-a</p></div> 
     <div class="query-div"><p class="query-p">Test-b</p></div> 
     <div class="query-div"><p class="query-p">Test-ba</p></div> 
     <p id="query-show0">TEST-SHOW</p> 
<p id="child"></p> 
</div> 

注：私はjQueryを使ってこれをやってみました

表示なしていませんが、クラス "ショー" を持つ要素これは私のhtmlですhttps://pastebin.com/wEwdKKLy

私はちょうどjquery昨日学習し始めている、それは動作しませんでした（私はこれと同じ問題があった）。
Jquery code試しました：https://pastebin.com/cBisCmEZ

ありがとうございました。ここで

Answer 1

は、私はそれがアクセス可能留まるようにクリックした何のためのボタン要素を使用することをお勧めします

$("p[data-id]").on("click", function() { 
 
    var idFound = $(this).data("id"); 
 

 
    $("[data-pre='"+ idFound +"']").toggleClass("show"); 
 
    
 
});

pre { 
 
    display:none; 
 
} 
 

 
.show { 
 
display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p data-id="p1">This is the paragraph</p> 
 
<pre data-pre="p1">This is the pre<pre>

のためのソリューションです。