CODEWITHSUNDEEP
jqueryjquery-selectors
user1354470
user1354470

Reputation: 1

Toggle having the same class name

I have a problem using jQuery for toggle. When i have the same class name for some tags, i would like to get the one event only on clicking the button.

Some of my code are below, and if i click a button named '1', it shows the rows of '2' and '5' since they have the same class name 'detail'. however, if i click '1', i would like to show only the row of '2'.

I am not willing to use different name since it is supposed to have lots of rows having toggle function. which means i need to have many names for each tag.

Please help me with some solution and advice, thank you.

---Script----

    <script>
            $(".button").click(function () {
                $(".detail").slideToggle("slow");
            });
            $(".button2").click(function () {
                $(".detail2").slideToggle("slow");
            });
    </script>

---HTML-----

   <table class="w850 table">
        <tr>
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="1" class="button"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="2" class="button2"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail2" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="3" />
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr>
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="4" class="button"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="5" class="button2"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail2" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="6" />
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
    </table>

Upvotes: 0

Views: 516

Answers (2)

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

$(".button").click(function () {
    $(this).closest("tr").siblings(".detail:first").slideToggle("slow");
});
$(".button2").click(function () {
    $(this).closest("tr").siblings(".detail2:first").slideToggle("slow");
});

This will select first .detail row

You can have a look at here http://jsfiddle.net/4KP9Y/2/ for working code

Upvotes: 1

Jamund Ferguson
Jamund Ferguson

Reputation: 17014

If your button is found in the rows you can probably do something like this:

$(".button").click(function() {
  $(this).closest("tr").siblings(".detail2").show()
});

You probably want to look at jQuery's functions for traversing the DOM. Meaning getting from here to there: http://api.jquery.com/category/traversing/

Upvotes: 0

Related Questions