I'm currently working on a table, and I would like to make it collapsible as well as editable. However, I've been having trouble achieving both functionalities simultaneously. The table in the provided link is exactly how it should look, and the editable JavaScript is functioning correctly. Now, I just need guidance on how to collapse the rows. For instance, collapsing all sub-items 1 under Item 1 or collapsing all sub-items under Item 3.
<html>
<style>
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 30px auto 15px;
grid-template-rows: 40px auto 20px;
grid-template-areas:
". title ."
". header ."
". content ."
". footer .";
grid-gap: 5px;
}
.title {
grid-area: title;
}
.header {
grid-area: header;
place-self: left;
font-family: Montserrat, sans-serif;
font-size:50px;
}
.content {
grid-area: content;
display: grid;
}
.footer {
grid-area: footer;
}
</style>
The jquery.tabledit.js file is too big to include here, but you can find it described in the JSFiddle link :-).