jquery: how to update keyup event for accordion -
i have search functionality, shows particular panels of accordion, when search query matched. see fiddle. accordion expanded (class="in"), when sth matched. once search field cleared, accordion go collapsed. that, try remove added class="in", seems not refreshed, when field cleared. ideas?
var $infopanels = $('.panel-info'), cachedtext = []; $infopanels.each(function (i, v) { cachedtext[i] = $(this).text().tolowercase(); }); $('#search-criteria').on('keyup', function () { var g = $(this).val().tolowercase(); if (g !== ""){ $infopanels.parentsuntil('.accordion').hide().removeclass("in"); } $.each(cachedtext, function (i, v) { if (g.length > 0 && v.indexof(g) !== -1) { $infopanels.eq(i).show().parentsuntil('.accordion').addclass("in").show(); } }); });
update: got working adding else if, see fiddle.
the code checks if search-criteria
has value , removes class. instead should check if g == ""
, remove class. add else
clause condition in
class not added when g == ""
.
$('#search-criteria').on('keyup', function () { var g = $(this).val().tolowercase(); if (g == ""){ //check if g empty string $infopanels.parentsuntil('.accordion').hide().removeclass("in"); }else{ //if not empty add class $.each(cachedtext, function (i, v) { if (g.length > 0 && v.indexof(g) !== -1) { $infopanels.eq(i).show().parentsuntil('.accordion').addclass("in").show(); } }); } });
working example: http://jsfiddle.net/bsxgp/2/
Comments
Post a Comment