javascript - How to get this checkbox toogle to work -
i creating toggle checkbox own css , jquery got stuck, want inner-box slide left right , right left onclick event changing text yes no , no yes.
my css file as:
.outer-box{ background:green; padding:5px; width:50px; height:20px; } .inner-box{ background:blue; padding: 2px; width:17px; height:17px; display:inline; } js file as:
$(document).ready(function(){ $('.outer-box').click(function(){ var value = $('.outer-box').attr('id'); alert(value); if(value === 'right-box'){ // alert(value+" -- "); //$('.outer-box').text('n'); $('.inner-box').css('float','left'); $('.outer-box').text('n'); $('.outer-box').removeattr('id'); $('.outer-box').attr('id','left-box'); }else if(value === 'left-box'){ $('.inner-box').css('float','right'); $('.outer-box').text('yes'); $('.outer-box').removeattr('id'); $('.outer-box').attr('id','right-box'); } }); }); and html file as:
<!doctype html> <html> <title>feed form</title> <head> <link rel="stylesheet" type="text/css" href="self.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script type="text/javascript" src="self.js"></script> </head> <body> <div class="outer-box" id="right-box" > yes <div class="inner-box" style="float:right;"></div> <div style="clear: both;"></div> </div> </body> </html> i want checkbox button : http://codepen.io/creativejuiz/pen/zqktp can me out
when call $('.outer-box').text('n'); overwriting <div class="inner-box" style="float:right;"></div> doesnt appear anymore. wrap text in span , change text of element, no longer overwrite sliding box.
see fiddle here: http://jsfiddle.net/kf4ql/1/
Comments
Post a Comment