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