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'> ↓ </div> </div> but doesn't anything. on other hand if take if...else if out , set character $(this).children('.articlearrow').html('↑'); 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') ? '↑' : '↓' ); // 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") ? "↑" : "↓") }) }); javascript jquery html
Comments
Post a Comment