CODEWITHSUNDEEP
javascriptjqueryhtmlcss
beannshie
beannshie

Reputation: 89

Toggle display of an an element when you click on another element

I have a p element and a hidden pre element. I want to make it so that when you click on a p element with (for example) id/class = "p1", it changes the display of the pre element with (for example) id/class = "pre1".

This is my javascript code :

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);

This code kind of works but not really. It sometimes changes other elements and sometimes does nothing.

This is my full javascript code : https://pastebin.com/wEwdKKLy

This is my html : 

<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>

Note : elements with class "show" have display none

I tried doing this with jquery but I'm just began learning jquery yesterday and it didn't work (I had the same problem as this).
Jquery code I tried : https://pastebin.com/cBisCmEZ

Thank you for your help.

Upvotes: 0

Views: 69

Answers (1)

Steven
Steven

Reputation: 867

Here is the solution for you

$("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>

I recommend using a button element for anything you click so that it stays accessible.

Upvotes: 1

Related Questions