How to hide values in a table Row and show it when you click on plus

Question

I am trying to hide my table value for one of my column since it has more than 10 values and to only show it when you click on plus. and otherwise when you click on minus it hides back the column values

My attempt to this is below . It works but not the way I want. It just shows the first value and not the rests when you click on plus. I haven't much knowledge in JS can someone please give me more clues on how I can handle this?

Here is my code

HTML

<table>
  <thead>
         <tr>
            <th>Forms</th>
         </tr>
     </thead>
     <tbody>

        <tr>
         <td id="details-control" class="details-open">

   <span id='content' class="d-none"><?= $row->getElement()?><br> </span>
  </td>

            </tr>
        </tbody>

CSS

td.details-open {
    background: url("../img/details_open.png") no-repeat center center;
    cursor: pointer;
}
td.details-close {
    background: url("../img/details_close.png") no-repeat center center;
}

My script

    $(document).ready(function(){
    $('#details-control').on('click', function (e) {
        $("#content").removeClass("d-none")
        $("#details-control").removeClass("details-open")
        $("#details-control").addClass("details-close")

    });
});

Answer 1

The issue is for two reasons. Firstly you're repeating the same id in multiple places when they must be unique within the DOM. Change these to classes if you want to group elements by common purpose or behaviour.

Secondly, you're attempting to select all the #content and #details-control elements when a cell is clicked. You need to instead use DOM traversal to find content related to the cell which was clicked. To do that use the this keyword.

With that said, try the below example. Note that the colours were only added to make the effect more obvious, as the image URLs won't work on this site.

 $(document).ready(function() { $('.details-control').on('click', function(e) { var $cell = $(this).toggleClass('details-open details-closed'); $cell.find('.content').toggleClass('d-none'); }); }); 

 td.details-open { background: url("../img/details_open.png") no-repeat center center; cursor: pointer; color: #C00; } td.details-close { background: url("../img/details_close.png") no-repeat center center; color: #CCC; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>ID</th> <th>Forms</th> </tr> </thead> <tbody> <tr> <td> Key #1 </td> <td class="details-control details-open"> <span class="content d-none">Name #1<br> </span> <span class="content d-none">Name #2<br> </span> </td> </tr> <tr> <td> Key #2 </td> <td class="details-control details-open"> <span class="content d-none">Name #3<br> </span> <span class="content d-none">Name #4<br> </span> <span class="content d-none">Name #5<br> </span> </td> </tr> </tbody> </table>