Show/Hide jquery

Question

I have a table that shows values coming from the database. Below the line I am trying to run a div to use the toggle() function of jquery. I don’t know what I’m doing wrong, because when I click it shows everyone. I just want the clicked line to show the div. Personal thank you.

HTML:

<table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Nº do Cliente</th>
                                    <th scope="col">Nome</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Corretor</th>
                                    <th scope="col">Data de Cadastro</th>
                                    <th scope="col">Ações</th>
                                </tr>
                            </thead>
                            <tbody>

                                <?php




                                //aqui fica uma função PHP de SELECT. tirei pra nao ficar grande o codigo html. =) {
                                    ?>


                                    <tr style="padding:20px;">
                                        <td>ID</td>
                                        <td><span class="nomeTabela">Nome</span></td>
                                        <td>Ativo</td>
                                        <td>Eraldo Carlos</td>
                                        <td>20/06/2018</td>



                                    <tr class="tblOculto"><td>
                                            <div class="divOculto">
                                                Aqui vem a informação oculta.
                                            </div>
                                        </td></tr>
                                    <?php
                                }
                                ?>


                                </tr>

                            </tbody>
                        </table>

JQUERY:

$(document).ready(function(){
           $(".nomeTabela").click(function(){

               $('.tblOculto').css('display', 'block');
              $(".divOculto").slideToggle("slow");


           }); 
        });

Answer 1

This class seems unnecessary:

<tr class="tblOculto">

It would also make more sense to put a colspan="5" at first td where has the div hidden to track table width, since there are 5 columns:

<tr>
   <td colspan="5">
      <div class="divOculto">
         Aqui vem a informação oculta.
      </div>
   </td>
</tr>

Example:

$(document).ready(function(){
   $(".nomeTabela").click(function(){
      $(this)
      .closest('tr')        // pega a linha pai
      .next()               // pega a próxima linha
      .find('.divOculto')   // seleciona a div
      .slideToggle("slow"); // aplica o toggle
   }); 
});

.divOculto{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover">
   <thead>
      <tr>
         <th scope="col">Nº do Cliente</th>
         <th scope="col">Nome</th>
         <th scope="col">Status</th>
         <th scope="col">Corretor</th>
         <th scope="col">Data de Cadastro</th>
         <th scope="col">Ações</th>
      </tr>
   </thead>
   <tbody>
      <tr style="padding:20px;">
         <td>ID</td>
         <td><span class="nomeTabela">Nome</span></td>
         <td>Ativo</td>
         <td>Eraldo Carlos</td>
         <td>20/06/2018</td>
      </tr>
      <tr>
         <td colspan="5">
            <div class="divOculto">
               Aqui vem a informação oculta.
            </div>
         </td>
      </tr>
      <tr style="padding:20px;">
         <td>ID</td>
         <td><span class="nomeTabela">Nome</span></td>
         <td>Ativo</td>
         <td>Eraldo Carlos</td>
         <td>20/06/2018</td>
      </tr>
      <tr>
         <td colspan="5">
            <div class="divOculto">
               Aqui vem a informação oculta.
            </div>
         </td>
      </tr>
   </tbody>
</table>

Another error is you are closing the line out of the PHP loop:

<?php
                            }
                            ?>


                            </tr> ←