CODEWITHSUNDEEP
javascriptjqueryhtmlcssrows
user470760
user470760

Reputation:

Collapse Table Rows with JQuery by Default

I implemented a method found on another Stack Overflow post to allow for the expanding and collapsing of table rows using JQuery. The approach is simple and works as expected, however I am encountering the issue that the rows are expanded by default. How can I make these appear collapsed on page load so that the user can decide which ones to expand?

As a side note, is there any way to make the collapse/expand appear more smoothly rather than just instant opened or closed?

Thanks!

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    $( document ).ready(function()
    {
        $('.header').click(function()
        {
            $(this).nextUntil('tr.header').slideToggle(1000);
        });
    });
</script>
</head>
<body>

<table>
    <tr class="header">
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
    </tr>
    <tr>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
    </tr>
    <tr class="header">
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
    </tr>
    <tr>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
    </tr>
</table>

</body>
</html>

Upvotes: 0

Views: 4012

Answers (2)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Try This :-

$('table tr:not(.header)').hide();

Fiddle

Upvotes: 2

Suraj Rawat
Suraj Rawat

Reputation: 3763

use this 

$('.header + tr').hide();

your working code

Upvotes: 0

Related Questions