javascript - jQuery target next() html item -
hi have list of items generated so:
<li class="panel-title">item 1<i class="fa pull-right fa-plus"></i></li> <ul class="panel-body">...</ul> <li class="panel-title">item 2<i class="fa pull-right fa-plus"></i></li> <ul class="panel-body">...</ul> <li class="panel-title">item 3<i class="fa pull-right fa-plus"></i></li> <ul class="panel-body">...</ul>
upon clicking 'li' item need next 'ul' expand. unsure how solve & whether next() right action heres code
$('li.panel-title > .fa').on("click",function() { var $curricon = $(this); var $contents = $('ul.panel-body'); if($curricon.hasclass('fa-plus')) { $curricon.$contents.next().slidedown(); $curricon.removeclass('fa-plus'); $curricon.addclass('fa-minus'); } else if($curricon.hasclass('fa-minus')) { $curricon.$contents.next().slideup(); $curricon.removeclass('fa-minus'); $curricon.addclass('fa-plus'); } });
try this
$('li.panel-title > .fa').on("click",function() { var $curricon = $(this); var $contents = $('ul.panel-body'); if($curricon.hasclass('fa-plus')) { $curricon.parent().next().slidedown(); $curricon.removeclass('fa-plus'); $curricon.addclass('fa-minus'); } else if($curricon.hasclass('fa-minus')) { $curricon.parent().next().slideup(); $curricon.removeclass('fa-minus'); $curricon.addclass('fa-plus'); } });
Comments
Post a Comment