Basically I have an html table with 3 layers of expand/collapse functionality. What I am seeking to achieve is to have the layers actually expand/collapse underneath the parents instead of to the right, basically what they would become is a downward slope once they are expanded. Here is my JSFiddle:
https://jsfiddle.net/htfLmekL/1/
//expand collapse based on parent class which is column 1
$(document).ready(function() {
$('.parent').prepend('-');
$('.parent').on('click', function() {
if ($(this).text().indexOf('-') != -1) {
var str0 = $(this).text().replace(/-/g, '+');
$(this).text(str0);
} else {
var str = $(this).text().replace(/\+/g, '-');
$(this).text(str);
}
var $row = $(this).parent();
var rowspan = +$(this).attr('rowspan') || 4;
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.alliance').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.race').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.role').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.resource').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.weapon').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.price').toggle();
});
});
