CODEWITHSUNDEEP
jquery
Citti
Citti

Reputation: 463

jquery changing multiple elements on click

Been scratching my head on this one for a while. Basically I have an external div container and when the click is fired on that div I am trying to change the following under it: div class="selected" (which works) the ul.more i am trying to slide toggle and the icon i am trying to switch the class so .toggleClass

The ul and icon are not firing. Not sure what i am doing wrong here. And weirdly enough when i switch the trigger from the div to the icon I can actually toggle the class on the icon and the hidden ul as well. but for some reason when i make my trigger the div both proceeding it fail.

Jfiddle:http://jsfiddle.net/LDad5/1/

code below:

css: 

ul.more {
display: none;
}

HTML:

<div class="wtf"> <div> <i class="icon-ygg-chevron-right"><span class="docu-title">Lorem ipsum dolor sit</span></i> <ul class="more actu-landing-list"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis mauris id dolor tincidunt cursus. Aliquam elementum malesuada purus, at porttitor risus viverra quis. In sit amet sagittis nibh. Suspendisse hendrerit mi risus, a rhoncus nunc ultricies quis. Nullam a posuere felis. Nunc aliquam odio mauris, ut porta diam cursus a. In elementum molestie sem, id aliquet nunc dignissim nec. Sed in elit a elit faucibus accumsan a vel dui. Sed vel ante et mauris tempor accumsan. Cras velit nunc, tempor nec venenatis non, ullamcorper at diam. Donec non odio aliquet, fermentum erat eget, rhoncus nisi. Pellentesque urna neque, mattis a consectetur volutpat, tincidunt non nisl. Curabitur pulvinar viverra tellus, faucibus hendrerit arcu elementum nec.</li> </ul> </div> </div>

JS:

$(document).ready(function() {
    $('.wtf div').on('click', changeCarrotClass3);
});

function changeCarrotClass3() {


    $(this).toggleClass("selected");

    $(this).next('ul').slideToggle(400);

    $(this).next('i').toggleClass("icon-ygg-chevron-down");

}

Upvotes: 0

Views: 56

Answers (1)

j08691
j08691

Reputation: 207881

.next() literally only looks at the next element. You want to use .find() which looks at descendants, since <i> and <ul> are descendants of the div being clicked on:

function changeCarrotClass3() {
    $(this).toggleClass("selected");
    $(this).find('ul').slideToggle(400);
    $(this).find('i').toggleClass("icon-ygg-chevron-down");
}

jsFiddle example

Upvotes: 1

Related Questions