CODEWITHSUNDEEP
htmljquery-pluginsjquery
Haran Murthy
Haran Murthy

Reputation: 341

show hide multiple rows using button click jquery

I have a html table like so

    <html>
    <head>
    </head>
    <body>
<div>
    <div>
    <table>
    <tr></tr> --visible row 1
    <tr></tr> --show\hide on click by visible row1
    <tr></tr> --show\hide on click by visible row1
    </table>
    </div>
    <div>
    <table>
    <tr></tr> --visible row 2
    <tr></tr> --show\hide on click by visible row2
    <tr></tr> --show\hide on click by visible row2
    <tr></tr> --show\hide on click by visible row2
    </table>
    </div>
    <div>
    <table>
    <tr></tr> --visible row 3
    <tr></tr> --show\hide on click by visible row3
    </table>
    </div>
<div>
    </body>
    </html>

How do i perform show\hide of the tr's by clicking the corresponding visible rows. I have seen examples where one row next one is removed, but how do i show hide tr within the parent table of the visible row and hide all child row not in 1 st positon.

If someone could post the jquery function, i can work out of that. thanks much appreciated.

Upvotes: 1

Views: 3592

Answers (2)

charlietfl
charlietfl

Reputation: 171669

not sure about page load state, following will hide all but first row of each table on load and apply click handler to top row

$('table').each(function(){
    $('tr:first', this) .click(function(){
        $(this).siblings().toggle()
    })
  $('tr:gt(0)', this).hide()
})

DEMO: http://jsfiddle.net/Rd8PU/

Upvotes: 3

chris_code
chris_code

Reputation: 1224

Assign a class to the visible rows (class="clickable")

then here is your function

$('tr.clickable').click(function() {
    $(this).siblings().toggle();
});

Hope this helps

Upvotes: 1

Related Questions