Make multiple data “visible” or “hidden” using CSS and Javascript

Question

I need your support in choosing logic. My script pulls several rows from the database and displays on the screen. I want to provide a feedback form for each information. These feedback forms should be hidden and visible when you click on the text (for example, the answer to this question) - Pls refers to the image.

I tried using java script and CSS

<script>
function hideElement()
{
document.getElementById("target").style.display="none";
}
function showElement()
{
document.getElementById("target").style.display="block";
}
</script>


// Data-1 fetched from DB goes here
<a href='#target'>Reply to this post</a>
<span id='target' style='display:none'>
// Feedback form for Data 1 here
</span>

// Data-2 fetched from DB goes here
<a href='#target'>Reply to this post</a>
<span id='target' style='display:none'>
// Feedback form for Data 2 here
</span>

But it only works for the first record - Javascript finds the first object named "target" and sets the display property to "none" or "block"

, , java sript. - ? ( , )

Answer 1

, , , , , , .

, DOM-, , :

// bind click handler to the document
document.addEventListener("click", function(e) {
  // test if the actual clicked item has the class "reply"
  if (e.target.className.match(/\breply\b/)) {
    e.preventDefault();
    // find the related target span
    var target = e.target.parentNode.querySelector(".target");
    // update its visibility
    target.style.display = target.style.display === "none" ? "block" : "none";
  }
});

<div>  <!-- note added wrapper div -->
  <a href='#target' class="reply">Reply to this post</a>
  <span class='target' style='display:none'>
      Feedback form for Data 1 here
  </span>
</div>
<div>  <!-- note added wrapper div -->
  <a href='#target' class="reply">Reply to this post</a>
  <span class='target' style='display:none'>
      Feedback form for Data 2 here
  </span>
</div>

JS, , , :

var target = e.target.parentNode.querySelector(".target");

e event, . e.target , . , , "" , .parentNode, div, , .querySelector(".target") div, target.

, html, :

• span
• class="reply"
• div , DOM- . e.target.nextSibling, , , . , . , - , .

. , , , , .

Answer 2

http://codepen.io/sheriffderek/pen/BzmAwg

1: ID

<ul class="item-list">
    <li>
        <p>default stuff</p>
        <div class="hidden-thing">
            hidden stuff
        </div>
    </li>
    <li>
        <p>default stuff</p>
        <div class="hidden-thing">
            hidden stuff
        </div>
    </li>
    <li>
        <p>default stuff</p>
        <div class="hidden-thing">
            hidden stuff
        </div>
    </li>
</ul>

2: CSS,

( , )

.item-list
    list-style: none
    margin: 0
    padding: 0
    li
        background: gray
        padding: .5rem
        margin-bottom: 1rem
        cursor: pointer
        .hidden-thing
            display: none // hide it

3: , jquery JavaScript- - this, , - ... DOM - show, : block... fadeIn() animate() .

JavaScript

$('.item-list li').on('click', function() {
    $(this).find('.hidden-thing').show();
});

// or... 
$('.item-list li').on('click', function() {
    $('.item-list li').find('.hidden-thing').hide();
    $(this).find('.hidden-thing').show();
});

, , - - janky, .

... , . . .:) .closest - , : http://codepen.io/sheriffderek/pen/oLoqEy