CODEWITHSUNDEEP
jqueryhideslidetoggle
Wistar
Wistar

Reputation: 3790

jQuery .slideToggle() hidden by default

I'm using .slideToggle(). I want to hide the element by default so I can slide them down on click.

I have that HTML code

<table>
  <tr class="master">
    <td class="entry">Hello</td>
    <td class="entry">Kitty</td>
  </tr>
  <tr>
    <td class="entry">Hello 1</td>
    <td class="entry">Kitty 1</td>
  </tr>
  <tr>
    <td class="entry">Hello 2</td>
    <td class="entry">Kitty 2</td>
  </tr>
  <tr class="master">
    <td class="entry">Hello</td>
    <td class="entry">Kitty</td>
  </tr>
  <tr>
    <td class="entry">Hello 1</td>
    <td class="entry">Kitty 1</td>
  </tr>
  <tr>
    <td class="entry">Hello 2</td>
    <td class="entry">Kitty 2</td>
  </tr>
</table>

This is the jQuery

$(document).ready(function() {    
  $('.entry').hide(); // I also tried .slideUp
  $('.master').click(function() {
  $(this).nextUntil('tr.master').slideToggle(100, function() {
});});});

If I try to hide the entry class with .hide() or .slideUp I can't display it using .slideToggle

Any suggestions?

Upvotes: 0

Views: 6369

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to hide the non tr.master elements

$('.master').nextUntil('tr.master').hide();

Demo: Fiddle

Upvotes: 2

Related Questions