CODEWITHSUNDEEP
jquery
gaurav oberoi
gaurav oberoi

Reputation: 463

more than 1 actions occuring at once onclick

i am using a click-open accordian-type script. the problem is that the selectors on which it is applied are repeated, and due to this on clicking a link, one only the child element of the clicked element should be affected, whereas all other list items (which are repeated) arebeing affected at the same time.

the jquery is like this:

$(document).ready(function(){
$("#odd-accordion ul.nextslide > li a").click(function(){
    $("ul.nextslide-second a").slideToggle('300');

    });
});

the html is like this:

<div class="adminmenuback">
    <div class="commonlogo">
        <img src="images/logo.png" alt="Wish2book">
    </div>
    <div class="searchh">
        <input type="text" placeholder="search"><span class="menutitle_rightimage"></span> 
    </div>

    <h2 class="menutitle"><span class="dashboard-icon"></span>Dashboard</h2>

    <ul class="adminmenu" id="odd-accordion">
        <li>
            <h3><a href="#">Flights</a></h3>
            <ul class="nextslide">
                <li><a href="#">abc</a>
                    <ul class="nextslide-second">
                        <li><a href="#">abc-child</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <h3><a href="#">Flights</a></h3>
            <ul class="nextslide">
                <li><a href="#">abc</a>
                    <ul class="nextslide-second">
                        <li><a href="#">abc-child</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <h3><a href="#">Flights</a></h3>
            <ul class="nextslide">
                <li><a href="#">abc</a>
                    <ul class="nextslide-second">
                        <li><a href="#">abc-child</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

pls help. the jsfiddle link is here: http://jsfiddle.net/BVz97/

in the jsfiddle, just click "abc" and all abc-child will be selected

Upvotes: 0

Views: 62

Answers (2)

James Montagne
James Montagne

Reputation: 78630

You can use find to only find the one contained in the clicked element.

$("#odd-accordion ul.nextslide > li a").click(function(){
    $(this).closest(".nextslide").find("ul.nextslide-second a").slideToggle('300');
});

http://jsfiddle.net/BVz97/1/

Upvotes: 2

Tim B
Tim B

Reputation: 1877

You need to stop propagation:

$(document).ready(function(){
    $("#odd-accordion ul.nextslide > li a").click(function(ev){
        ev.preventDefault();
        ev.stopPropagation();
        $("ul.nextslide-second a").slideToggle('300');
    });
});

Upvotes: 0

Related Questions