CODEWITHSUNDEEP
javascriptjqueryhtml
makey
makey

Reputation: 105

Extend/collapse table except one row

I need table be collapsed except one row being clicked. And the code below does the job:

html:

<table border="0">
<tr><td>This is row number</td><td>1</td></tr>
<tr><td>This is row number</td><td>2</td></tr>
<tr><td>This is row number</td><td>3</td></tr>
<tr><td>This is row number</td><td>4</td></tr>
<tr><td>This is row number</td><td>5</td></tr>
</table>

jQuery:

$("tr").click(function () {
    $("tr").not(this).slideToggle();
});

Once visible is only one row would like to expand table back on mouseover and this is also easy by:

$("tr").mouseover(function(){
        $("tr").show();
});

So now, how to make table to be collapsed back on mouseout leaving same row visible ?

http://jsfiddle.net/GbRAZ/201/

Will appreciate for any suggestions.

Upvotes: 0

Views: 361

Answers (2)

makey
makey

Reputation: 105

Thanks to @gaby-aka-g-petrioli code work perfect, just changing tr to table in $("table").mouseover(function() allows me to change selected row.

Thank you.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196197

You should add a class to the active row and use that to determine what to show/hide

$("tr").click(function () {
    $(this)
       .addClass('active')
       .siblings()
       .removeClass('active')
       .slideToggle();
});

$(".header").mouseover(function(){
    $("tr").show();
}).mouseout(function(){
    $('tr:not(.active)').hide();
});

Upvotes: 2

Related Questions