collapsed div open and close

Using JavaScript, you can use an event listener to toggle a CSS class that manages the div's display property, opening a collapsed div. Here's how to change your code to make this happen:

var ProcessViewContent = '';
if (json != '') {
    $.each(json, function (index, obj) {

        ProcessViewContent += '

// Function to toggle collapse
function toggleCollapse(id) {
    var element = document.getElementById(id);
    if (element.classList.contains('collapsed')) {
        element.classList.remove('collapsed');
    } else {
        element.classList.add('collapsed');
    }
}
 

The button that I've added to each collapsed div in this modification has a onclick event that calls the toggleCollapse function and passes the TaskID as an argument. Toggle the collapsed class of the div with the supplied id using the toggleCollapse method.

Now, each collapsed div's "Toggle" button allows you to choose how visible it is. To modify how the div looks when collapsed, modify the collapsed class in your CSS.

$(document).on('click', '.collapsed', function() {
    $(this).removeClass('collapsed');
    // Additional logic or animations can be added here
});

By attaching a click event to the collapsed div, you can dynamically open it when the user interacts with it.