Home/ Questions/Q 631105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T19:55:42+00:00

Using jQuery I am trying to create a function to show and hide the

  • 0

Using jQuery I am trying to create a function to show and hide the DIV below the table/tr that has been clicked, but when I click in one, all the DIVs will slide up, also slide down it is not working.

I tried if ($(".container:first").is("hidden")) but I guess is not the first element under element clicked but first element on the document.

How do I get this working?

Based on the following example.

<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".header").click(function(){
                    if ($(".container").is("hidden")){
                           $(".container").slideUp("slow");
                    } else {
                       $(".container").slideDown("slow");
                    }
                });
            });
        </script>
    </head>

    <body>
        <table class="header">
            <tr><td>Row1</td></tr>
        </table>
        <div class="container">Container 1</div>

        <table class="header">
           <tr><td>Row2</td></tr>
        </table>
        <div class="container">Container 2</div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You want to get only the next container, so you’d use $.next():

    $(".header").click(function(){
  $(this).next(".container").slideToggle();
});

    Online Demo: http://jsbin.com/eyuwi3/edit

    Updated

    Requested in the comments was to make this "work on the tr elements." If you click anywhere within the table, the table’s click event will eventually fire – unless a child is stopping the propagation.

    If this code is not working, then your problem is elsewhere. Make sure you don’t have elements between your table and your .container element. $.next() only selects immediate siblings, which is what your sample-code suggests you have.

    If problems persist, you could try the following:

    $(".header").click(function(){
  $(this).nextAll(".container:first").slideToggle();
});

    Online Demo: http://jsbin.com/eyuwi3/2/edit

    • 0