Home/ Questions/Q 7596833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:01:02+00:00

How can I get the open/close (i.e., up/down arrows) to work independently in the

  • 0

How can I get the open/close (i.e., up/down arrows) to work independently in the following code? Now, they operate in tandem which is misleading. When I ‘open’ Product A it should then display the up or close arrow which it does but so does Product B which hasn’t been ‘opened’ yet.

<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

.productDetails {
    display: none;
}
</style>

</head>
<body>
        <table border="1">
            <tr>
              <td><a href="#" class="expandProductDetails">Product A <span>&darr;</span><span style="display: none;">&uarr;</span></a></td>
            </tr>
            <tr class="productDetails">
                <td><strong>Product Philosophy</strong> Aliquam eu velit nibh. In eleifend convallis ante, sit amet semper arcu lobortis vitae.</td>
            </tr>

            <tr>
              <td><a href="#" class="expandProductDetails">Product B <span>&darr;</span><span style="display: none;">&uarr;</span></a></td>
            </tr>
            <tr class="productDetails">
                <td><strong>Product Philosophy</strong> Nunc ac nisi vel leo iaculis feugiat. Quisque blandit tempor vestibulum.</td>
            </tr>
        </table>

<script>
    $('.expandProductDetails').click(function() {

        $(".expandProductDetails span").toggle();

        $(this).closest("tr").next().slideToggle("slow");

    });
</script>

</body>
</html>

Working (somewhat) example: http://jsfiddle.net/stulk/mqjuR/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change this:

    $(".expandProductDetails span").toggle();

    to this:

    $(this).children('span').toggle();

    $(".expandProductDetails span") targets every element that has the class expandProductDetails (and subsequently selects those elements’ child span elements. You want to target the child span elements of only the element that was clicked which, in the context of your click event, is this.

    Updated example

    • 0