CODEWITHSUNDEEP
jquery
Jens Van Herck
Jens Van Herck

Reputation: 27

jQuery doesn't hide other DIVs

I've bumped into a problem; I'm trying to get all other DIVs to close and toggle the one. I've tried to fix it myself but I got stuck. I hope someone can point me to what I'm doing wrong.

It's not running the command inside of the not(...):

$(document).ready(function() {
  $('.extralink').click(function() {
    $(this).closest('tr').next('tr.extra').toggle(); 

    $(this).not($(this).closest('tr').next('tr.extra')).hide; 
  });
}

html 

    <table class="avs" border="1" width="384px">
        <tr class="avs">
            <th>Avatar name</th>
            <th >Position</th>
        </tr>
        <tr class='avs'>
            <td>
                <a class='extralink' href="#"></a>
            </td>
            <td></td>
        </tr>
        <tr class='extra'>
            <td colspan='2' >
                <div>
                    <div>info</div>
                    <div>image</div>
                </div>
            </td>
        </tr>
 <tr class='avs'>
        <td>
            <a class='extralink' href="#"></a>
        </td>
        <td></td>
    </tr>
    <tr class='extra'>
        <td colspan='2' >
            <div>
                <div>info</div>
                <div>image</div>
            </div>
        </td>
    </tr>
    </table>​

Upvotes: 0

Views: 109

Answers (2)

wirey00
wirey00

Reputation: 33661

If you show some more HTML it would help. But here are some pointers to help you out

$(document).ready(function() {
  $('.extralink').click(function() {
    // should cache the tr
    $(this).closest('tr').next('tr.extra').toggle();     
    $(this).not($(this).closest('tr').next('tr.extra')).hide; //<--missing ()
    // usually not() isn't used with this - as anything with this is usually used inside not() to filter out
  });
}

So something like this would look better

$(document).ready(function() {
  $('.extralink').click(function() {
    var $tr = $(this).closest('tr').next('tr.extra');
    $tr.toggle();     
    $('tr.extra').not($tr).hide(); // <-- I'm guessing this is correct
    // since it's these tr's you are looking for to toggle
  });
}

Upvotes: 0

Phil-R
Phil-R

Reputation: 2253

You're missing the () on the hide function, which are needed to say you are actually calling it!

$(this).not($(this).closest('tr').next('tr.extra')).hide();

Upvotes: 4

Related Questions