CODEWITHSUNDEEP
jqueryslidetoggle
Jp.
Jp.

Reputation: 15

JQuery slideToggle a list inside a list

I have a table which has multiple rows. Within the rows are row options:

HTML CODE:

<ul class="rowOptions">
    <li>
        <img src="/images/navigation/arrow.png">
        <ul>
            <li><a href="javascript:updateRow(data)">Update</a></li>
            <li><a href="javascript:deleteRow(data);">Remove Link</a></li>
            <li><a href="javascript:archiveRow(data);">Archive Contact</a></li>
        </ul>
    </li>
</ul>

Originally, the inner ul displays on hover but we want the options to appear only if the img is clicked. So far, I tried:

JQUERY CODE:

$(document).on('click','.rowOptions img', function () {
    $('.rowOptions li ul').slideToggle();
});

The code works quite well on achieving the task of displaying the inner list except that it displays the inner list for all rows instead of the row being clicked.

Upvotes: 1

Views: 590

Answers (3)

dreamweiver
dreamweiver

Reputation: 6002

try pointing out to the sub list inside the main menu list and toggle.

HTML CODE:

<ul class="rowOptions">
<li>
    <img src="http://bxslider.com/images/730_100/tree_root.jpg">
    <ul>
        <li><a href="javascript:updateRow(data)">Update</a></li>
        <li><a href="javascript:deleteRow(data);">Remove Link</a></li>
        <li><a href="javascript:archiveRow(data);">Archive Contact</a></li>
    </ul>
</li>
     <li>
    <img src="http://bxslider.com/images/730_100/tree_root.jpg">
    <ul>
        <li><a href="javascript:updateRow(data)">Update</a></li>
        <li><a href="javascript:deleteRow(data);">Remove Link</a></li>
        <li><a href="javascript:archiveRow(data);">Archive Contact</a></li>
    </ul>
  </li>
</ul>

JQUERY CODE:

$(document).on('click', '.rowOptions img', function () {
    $(this).parent().find('ul').slideToggle();
});

LIVE DEMO:

http://jsfiddle.net/p7v8p/3/

Happy Coding :)

Upvotes: 0

Adil
Adil

Reputation: 148110

Use source of event using $(this)

$(document).on('click','.rowOptions img', function () {
    $(this).closest('li').find('ul').slideToggle();
});

Upvotes: 1

Amit Garg
Amit Garg

Reputation: 3907

$(document).on('click','.rowOptions img', function () {
   $(this).parent().find('ul').slideToggle();
});

Upvotes: 0

Related Questions