javascript - show toggle button on user generated input -
i have been trying without success add toggle button user generated input. font awesome toggle button.
here pen: http://codepen.io/lucky500/pen/bdpzbd , code.
<div id="list" class="greatlist clearfix" > <ul class="greatlist" style='display: none;'> <li class="items"> <div class="box"> <i class="fa fa-toggle-on fa-2x active" id="on"></i> <i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" style='display: none;'></i> </div> </li> </ul> </div>
jquery
$(document).ready(function(){ //toggler $('.box').click(function() { $('.inactive, .active').toggle(); }); var trash = '<span class="delete">x</span>'; var togglebutton = '<div class="box"></div>'; //to allow user use enter $('#addbutton').click(function(e){ e.preventdefault(); var item = $('#additems').val(); var placeit = $('<li style="display: block;">' + togglebutton + item + trash + '</li>'); if(!$.trim($('#additems').val())) { alert('please enter text add list'); } else { $('.greatlist').append(placeit); }; }) //to remove li when .trash clicked $(document).on('click', '.delete', function() { $(this).closest('li').fadeout(350); });
});
all appreciated!
i had add tag toggle inside togglebutton var... onto trying toggle work!
var togglebutton = '<div class="box" style="display: block;"><i class="fa fa-toggle-on fa-2x active" id="on"></i></div>';
Comments
Post a Comment