javascript - Toggling character in div on click -



javascript - Toggling character in div on click -

i expect next code toggle html content of .articlearrow between , downwards arrows when .articletitle clicked:

jquery

$(".articletitle").click(function () { if ($(this).children('.articlearrow').html() == '↑') $(this).children('.articlearrow').html('↓'); else if ($(this).children('.articlearrow').html() == '↓') $(this).children('.articlearrow').html('↑'); });

html

<div class='articletitle'> blah <div class='articlearrow'> &#8595; </div> </div>

but doesn't anything. on other hand if take if...else if out , set character $(this).children('.articlearrow').html('&#8593;'); works. setting character works it's if...else if that's not getting triggered , can't figure out why.

you can view live on website here (don't excited it's not actual admin panel!)

you can without messy if statement making utilize of .slidetoggle's complete callback method , jquery's :visible selector.

$(".articletitle").click(function () { // 1st, go ahead , asign our arrow element variable utilize in callback var arrow = $(this).find('.articlearrow'); $(this).siblings('.articlecontent').slidetoggle("slow", function(){ // `complete` callback method // in here, can manipulate whatever need when "toggle" `complete` arrow.html( $(this).is(':visible') ? '&#8593;' : '&#8595;' ); // within .html statement simple `inline if` statement says: // if true ? : else }); });

examplebehind show

plain code:

$(".articletitle").click(function () { var = $(this).find(".articlearrow"); $(this).siblings(".articlecontent").slidetoggle("slow", function () { a.html($(this).is(":visible") ? "&#8593;" : "&#8595;") }) });

javascript jquery html

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -