Shah-Toggle-List-Item-Class

by Md Shah

HTML

<ul>
    <li id="task1" class="open" data-taskid="1" data-projectid="Project1">Shah</li>
    <li id="task2" class="open" data-taskid="2" data-projectid="Project2">Dan</li>
    <li id="task3" class="open" data-taskid="3" data-projectid="Project3">Scott</li>
</ul>

CSS

.open {
    color: red;
    background-color: skyblue;
    width: 100px;
    margin: 5px;
}
.closed {
    color: skyblue;
    background-color: red;
    width: 100px;
    margin: 5px;
}

JavaScript

function toggleFunction(taskid) {
    
    // below jQuery statement will toggle between 2 classes - open & closed
    $('#task' + taskid).toggleClass("open closed"); 
}

$('li[id^=task]').click(function(e){
    
    var taskid = $(this).data("taskid");
    
    toggleFunction(taskid);
})