collapsed div open and close

Question

How to Open collapsed div var ProcessViewContent = ''; if (json != '') { $.each(json, function (index, obj) { ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; using this code

Mukesh Nailwal · Answer

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 += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' Toggle '; // Add a button to toggle collapse ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; ProcessViewContent += ' '; 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.

Jayraj Chhaya · Answer

$(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.

collapsed div open and close

Answers (2)