CODEWITHSUNDEEP
jqueryhtml-table
Jishnu U Nair
Jishnu U Nair

Reputation: 520

Table rows as dropdown

I have an HTML table. I'm trying to add functionality such that when I click on a row it should display a set of row, just like drop down menu. I have done the following: 

<table>
    <tr class="clicker">
        <td>some data</td>
    </tr>
    <tr class="hidden">
        <td>Some new data here</td>
    </tr>
</table>



$(".clicker").on("click", function () {
    if ($(this).next().hasClass("down")) {
        $(this).next().slideUp("normal").removeClass("down");
    } else {
        $(this).next().slideDown("normal").addClass("down");
    }
});

When I trying to add a second and third row in the hidden rows like:

   <table>
<tr class="clicker">
    <td>some data</td>
</tr>
<tr class="hidden">
    <td>Some new data here</td>

</tr>
<tr class="hidden">
    <td>Some more data here</td>

</tr>

, it doesn't work. What did I do wrong?

Upvotes: 1

Views: 11254

Answers (2)

sites
sites

Reputation: 21795

See this example.

$('.clicker').click(function(){
  $(this).nextUntil('.clicker').slideToggle('normal');
});

It toggles several rows. Also you can easily have several clicker with this way.

Upvotes: 1

rahul maindargi
rahul maindargi

Reputation: 5625

you need siblings instead of next.. next selects only 1 next sibling

DEMO

$(".clicker").on("click", function(){

if($(this).siblings().hasClass("down")){
    $(this).siblings().slideDown("normal").removeClass("down");
}
else{
   $(this).siblings().slideUp("normal").addClass("down");

}
});

Or 

 $(".clicker").on("click", function(){

    $(this).siblings().slideToggle('normal');

});

Upvotes: 1

Related Questions