Hacky, brittle code just for a quick demo of multi-folding in Roam. See https://twitter.com/elzr/status/1272400990373924866

roam-folding-demo.js

//// Inject jQuery by uncommenting this and pasting this in your console
//var jq = document.createElement('script');
//jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
//document.getElementsByTagName('head')[0].appendChild(jq);
//// ... give time for script to load, then type (or see below for non wait option)
//jQuery.noConflict();


// JS to paste in your console
//
//first toggles the first level of indenting, which was so annoying to detect structurally I'm just recognizing as those blocks that have Roam's H3 (Cmd-Alt-3)
//mode can be 'show' or 'hide' or nothing, in which case it defaults to toggle
function first(mode) {
	let firsts = $(".rm-level3").parent().parent();
	firsts[mode || 'toggle']();

	//toggle Roam's closed bullets;
	let seconds = $("div.flex-v-box.block-border-left div.flex-v-box.block-border-left");
	let zeros = $('.roam-article > div:first-child > div:first-child + div.flex-v-box > div.flex-v-box');

	let addRemoveClassZeros = (( firsts.first().css('display') == 'none' ) ? 'add' : 'remove')+'Class';
	zeros.has(".rm-level3").find('.simple-bullet-outer')[ addRemoveClassZeros ]('roam-bullet-closed');

	let addRemoveClassFirsts = (( seconds.first().css('display') == 'none' ) ? 'add' : 'remove')+'Class';
	firsts.parent().has("div.flex-v-box.block-border-left").find('.simple-bullet-outer')[ addRemoveClassFirsts ]('roam-bullet-closed');

	//toggle triangles
	let navi = $('.tocNavi .first');
	if(mode == 'hide') {
		navi.find('b').hide().end().find('strong').show();
	} else if(mode == 'show') {
		navi.find('b').show().end().find('strong').hide();
	} else {
		navi.find('b,strong').toggle();
	}
}

//second is the second level of indenting. The way I'm detecting them will not disambiguate further levels!
function second(mode) {
	let seconds = $("div.flex-v-box.block-border-left div.flex-v-box.block-border-left");
	seconds[mode || 'toggle']();

	let navi = $('.tocNavi .second');
	if(mode == 'hide') {
		navi.find('b').hide().end().find('strong').show();
	} else if(mode == 'show') {
		navi.find('b').show().end().find('strong').hide();
	} else {
		navi.find('b,strong').toggle();
	}
}

//this inserts the triangle toggles that will show hovering on the page's title
$('div.roam-article h1.rm-title-display').parent().hover(
	function() { 
		if( $(this).find('.tocNavi').length == 0 ) {
			$(this).append(
				'<div class="tocNavi" style="margin-top:-21px; color:#6d7378">'+
					'<span class="first" onclick="first(); second(\'hide\');" style="cursor:pointer; display:inline-block; margin-right:20px"><b>▾</b><strong style="display:none">▸</strong></span>'+
					'<span class="second" onclick="second(); first(\'show\'); " style="cursor:pointer"><b>▾</b><strong style="display:none">▸</strong></span>'+
				'</div>') 
		}
		$(this).find('.tocNavi').show();
	}, function() {
		$(this).find('.tocNavi').hide();
	}
)

//Oh btw, you will have to run the Roam "Expand all" command (accesible by right clicking on the page's title) before these toggles work correctly.