Jquery Toggle Class On Child Element

I have list of links, and if you click on any of them, it will toggle show/hide text below it in separate div. Also it hides all other divs if one of them is shown This code manage

Solution 1:

Find the <i> and call toggleClass

$(this).find("i").toggleClass("fa-plus-square fa-minus-square")

Solution 2:

To select the <i> inside your tag, you just do this:

$( this ).find( 'i' )

you can chain it all together to toggle the class--

$( this ).find( 'i' ).toggleClass( 'fa-plus-square fa-minus-square' )

and for siblings, if you want them all to have the class 'fa-minus-square', you do this:

$( this ).siblings().find( 'i' ).removeClass( 'fa-plus-square' ).addClass( 'fa-minus-square' )

Solution 3:

Using parent - child selectors in jQuery is quite simple...

$("a > div > i")

will select the i element, that is a child of the div element, that is a child of the a element. http://www.w3schools.com/jquery/sel_parent_child.asp.

If the elements are not going to be direct descendants, as in your example, remove the greater than sign.

$("a div i")

Solution 4:

Allright... this is my first time adding jQuery code to existing one so I tried to do something, it didnt work so i thought i did it wrong, but only mistake was selecting "li" instead of "i" element Solution was to add this line before the last line:

$(this).children('div').children('i').toggleClass("fa-plus-square fa-minus-square");