CODEWITHSUNDEEP
jquery
Andrei
Andrei

Reputation: 497

Target closest element inside parent li

I try to toggle a div inside a li but its not working for me

$('#open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

This is the FIDDLE

What i am doing wrong?

Upvotes: 0

Views: 602

Answers (7)

Nav
Nav

Reputation: 86

use a class selector

$('.open_p_table').on('click', function() {
        $(this).closest('li').find('.players').toggle();
    });

ID's are normally suppose to be unique

Upvotes: 0

George
George

Reputation: 36784

Both span elements share this ID: open_p_table.

IDs must be unique. Use classes instead:

$('.open_p_table').on('click', function () {
    $(this).closest('li').find('.players').toggle();
});

<ul>
    <li class="item">   <span class="open_p_table">Players</span>
        <div class="players">description</div>
    </li>
    <li class="item">   <span class="open_p_table">Players</span>
        <div class="players">description</div>
    </li>
</ul>

JSFIDDLE

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67197

Id should be uique..! change the open_p_table as a class and do,

$('.open_p_table').on('click', function () {
    $(this).closest('li').find('.players').toggle();
});
.open_p_table{ cursor:pointer; }
.open_p_table + .players {  display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<ul>
  <li class="item"><span class="open_p_table">Players</span>
    <div class="players">description</div>
  </li>
  <li class="item"><span class="open_p_table">Players</span>
    <div class="players">description</div>
  </li>
</ul>

Upvotes: 1

nitigyan
nitigyan

Reputation: 494

You are using ID for selecter. However, if there are multiple same IDs in a DOM, this will select only the first element with that ID. You will need to use the class.

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

and your HTML will be

<ul>
    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>

    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
</ul>

Upvotes: 0

Luke
Luke

Reputation: 4063

http://jsfiddle.net/oexf0624/1/

You were re-using an id (which must be unique) - I changed it to a class and now it works :)

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

<span class="open_p_table">Players</span>
<div class="players">
    description
</div>

Upvotes: 1

Wilfredo P
Wilfredo P

Reputation: 4076

First Id's must be unique, so change it to class like:

$('.open_p_table').on('click', function() {
        $(this).closest('li').find('.players').toggle();
    });

And you HTML:

<li class="item">
            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>

DEMO

Upvotes: 1

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Instead of taking duplicate id open_p_table take class as shown :

HTML :

<ul>
    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>

    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
</ul>

Jquery:

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

Working Demo

Upvotes: 1

Related Questions