how to show next row with classname in table which are hide using jquery

Question

please let me know how to remove class hide from nextall sublevel when click on mainlevel. It should not remove hide class from other sublevel which is next to mainlevel. please check the table structure below:

<table>
    <tbody>
        <tr>
            <td>
                <a class="mainlevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="mainlevel">
            </td>
        </tr>
        <tr>
            <td>
                <a class="hide sublevel">
            </td>
        </tr>
    </tbody>
</table>

Answer 1

If interpret Question correctly ? , try using .closest() to select parent of clicked element , .nextUntil() , :has() to select tr elements until next mainlevel , .find() to select .hide elements , .toggle() to toggle display of hide elements

 $(".mainlevel").click(function() { $(this).closest("tr").nextUntil("tr:has(.mainlevel)").find(".hide").toggle() }) 

 .hide { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <a class="mainlevel">click</a> </td> </tr> <tr> <td> <a class="hide sublevel">a</a> </td> </tr> <tr> <td> <a class="hide sublevel">b</a> </td> </tr> <tr> <td> <a class="mainlevel">click</a> </td> </tr> <tr> <td> <a class="hide sublevel">c</a> </td> </tr> </tbody> </table>