jquery how to hide all the tr show only the one when more is clicked

Question

please i have this table below with li inside a td and another tr inside every tr, i want all the tr with class hideme to be hidden till li with class viewmoreInfo is clicked it will only display the tr with in that tr, i just want to display info about that particular area clicked.

 <table id='tableInfo'>
  <tbody>     
  <tr>    
  <td class='serviceOperator'>
  <ul><li class="Li_OP">ABC </li>
  <li class="BType">Marcapolo</li>
  <li class="viewmoreInfo"><span >More </span></li>
  </ul>
  </td>
  <td class='timeDept'>00:00</td>
  <td  class='timeArr'>00:00</td>
  <td class='seatType'>40 Seater</td>
  <td class='fairCh'><span class='currency'>N</span> 3 000</td>
  <tr class='hideMe'><td >More info about the parent tr</td> </tr>
  </tr>

  <tr>    
  <td class='serviceOperator'>
  <ul><li class="Li_OP">another ABC </li>
  <li class="BType">Marcapolo</li>
  <li class="viewmoreInfo"><span >More </span></li>
  </ul>
  </td>
  <td class='timeDept'>00:00</td>
  <td  class='timeArr'>00:00</td>
  <td class='seatType'>40 Seater</td>
  <td class='fairCh'><span class='currency'>N</span> 3 000</td>
  <tr class='hideMe'><td >More info about the parent tr</td> </tr>
  </tr>

   <tr>    
  <td class='serviceOperator'>
  <ul><li class="Li_OP">third ABC </li>
  <li class="BType">Marcapolo</li>
  <li class="viewmoreInfo"><span >More </span></li>
  </ul>
  </td>
  <td class='timeDept'>00:00</td>
  <td  class='timeArr'>00:00</td>
  <td class='seatType'>40 Seater</td>
  <td class='fairCh'><span class='currency'>N</span> 3 000</td>
  <tr class='hideMe'><td >More info about the parent tr</td> </tr>
  </tr>
  </tbody>
  </table>

i tried using this code but it just shows all the hidden tr

$(document).ready(function(){
  $(".hideMe").hide();
$(".viewmoreInfo").click(function(){
  $(".hideMe").toggle();
});

});

i just want it to show only the tr that's clicked to open and if another tr is clicked the other one hides automatically please what is the best way to do this with jquery you will also notice am putting a tr inside another tr is that morally correct because i want a new row in the tr where i can put more info

Answer 1

Try this HTML & code ( demo )

HTML

<table id='tableInfo'>
    <tbody>
        <tr>
            <td class='serviceOperator'>
                <ul>
                    <li class="Li_OP">ABC</li>
                    <li class="BType">Marcapolo</li>
                    <li class="viewmoreInfo"><span>More </span>

                    </li>
                </ul>
            </td>
            <td class='timeDept'>00:00</td>
            <td class='timeArr'>00:00</td>
            <td class='seatType'>40 Seater</td>
            <td class='fairCh'><span class='currency'>N</span> 3 000</td>
        </tr>
        <tr class='hideMe'>
            <td colspan="5">More info about the parent tr</td>
        </tr>
        <tr>
            <td class='serviceOperator'>
                <ul>
                    <li class="Li_OP">another ABC</li>
                    <li class="BType">Marcapolo</li>
                    <li class="viewmoreInfo"><span>More </span>

                    </li>
                </ul>
            </td>
            <td class='timeDept'>00:00</td>
            <td class='timeArr'>00:00</td>
            <td class='seatType'>40 Seater</td>
            <td class='fairCh'><span class='currency'>N</span> 3 000</td>
        </tr>
        <tr class='hideMe'>
            <td colspan="5">More info about the parent tr</td>
        </tr>
        <tr>
            <td class='serviceOperator'>
                <ul>
                    <li class="Li_OP">third ABC</li>
                    <li class="BType">Marcapolo</li>
                    <li class="viewmoreInfo"><span>More </span>

                    </li>
                </ul>
            </td>
            <td class='timeDept'>00:00</td>
            <td class='timeArr'>00:00</td>
            <td class='seatType'>40 Seater</td>
            <td class='fairCh'><span class='currency'>N</span> 3 000</td>
        </tr>
        <tr class='hideMe'>
            <td colspan="5">More info about the parent tr</td>
        </tr>
    </tbody>
</table>

I moved the <tr class='hideMe'> 's next to the parent <tr> , then added colspan="5" to those <td> 's in the hideMe row.

Script

$(document).ready(function () {
    $(".hideMe").hide();
    $(".viewmoreInfo").click(function () {
        $(this).closest('tr').next(".hideMe").toggle();
    });
});