I've been struggling to implement a toggle button for user-generated input, specifically using a Font Awesome toggle button.
Here is the link to my codepen: http://codepen.io/lucky500/pen/bdpzbd along with the code snippet:
<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>';
// Allow user to submit using Enter key
$('#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 to add to the list');
} else {
$('.greatList').append(placeIt);
};
})
// Remove li when .trash is clicked
$(document).on('click', '.delete', function() {
$(this).closest('li').fadeOut(350);
});
});
Any assistance would be greatly appreciated!