javascript - Jquery accordian: How to target only the child class of a clicked element? -

javascript - Jquery accordian: How to target only the child class of a clicked element? -

demo

below illustration of simple working accordian.

html

<div class="accordian"> <div class="btn">button <div class="icn"><i class="up"></i></div> </div> <div class="content">content</div> </div>

jquery

$(function ($) { $('.accordian').find('.btn').click(function () { var $content = $(this).siblings('.content').slidetoggle('fast'); $('.content').not($content).slideup('fast'); //how toggle kid of clicked? $('.icn i').toggleclass('up').toggleclass('down'); }); });

the problem simple. class .up/.down css icons toggle on click. code toggles classes named up/down.

question

how target kid class of clicked element , apply appropriate class?

how suspect should work:

onclick if accordian closed - apply class .up clicked element. - apply class .down closed elements. else - vice versa

find element .icn i in clicked elements context.you need use:

$('.icn i').not($(this).find('.icn i')).removeclass('down').addclass('up'); $(this).find('.icn i').toggleclass('up').toggleclass('down');

working demo

javascript jquery html toggle accordion