move Hint and Solution knowls to details/summary disclosure

htdocs/js/Problem/details-accordion.js

@@ -0,0 +1,39 @@
+(() => {
+	const setupAccordion = (accordion) => {
+		const collapseEl = accordion.querySelector('.collapse');
+		const button = accordion.querySelector('summary.accordion-button');
+		const details = accordion.querySelector('details.accordion-item');
+		if (!collapseEl || !button || !details) return;
+
+		const collapse = new bootstrap.Collapse(collapseEl, { toggle: false });
+		button.addEventListener('click', () => collapse.toggle());
+
+		details.addEventListener('click', (e) => e.preventDefault());
+		collapseEl.addEventListener('show.bs.collapse', () => {
+			details.open = true;
+			button.classList.remove('collapsed');
+		});
+		collapseEl.addEventListener('hide.bs.collapse', () => button.classList.add('collapsed'));
+		collapseEl.addEventListener('hidden.bs.collapse', () => (details.open = false));
+	};
+
+	// Deal with solution/hint details that are already on the page.
+	document.querySelectorAll('.solution.accordion, .hint.accordion').forEach(setupAccordion);
+
+	// Deal with solution/hint details that are added to the page later.
+	const observer = new MutationObserver((mutationsList) => {
+		mutationsList.forEach((mutation) => {
+			mutation.addedNodes.forEach((node) => {
+				if (node instanceof Element) {
+					if (
+						(node.classList.contains('solution') || node.classList.contains('hint')) &&
+						node.classList.contains('accordion')
+					)
+						setupAccordion(node);
+					else node.querySelectorAll('.solution.accordion, .hint.accordion').forEach(setupAccordion);
+				}
+			});
+		});
+	});
+	observer.observe(document.body, { childList: true, subtree: true });
+})();

htdocs/js/Problem/problem.scss

@@ -123,6 +123,12 @@
 			border: 1px solid black;
 		}
 	}
+
+	/* Hints and Solutions */
+	.hint summary, .solution summary {
+		font-weight: bold;
+		color: var(--bs-primary);
+	}
 }
 
 /* rtl:raw:

macros/PG.pl

@@ -395,11 +395,12 @@ sub ADD_JS_FILE {
 # Some problems use jquery-ui still, and so the requestor should also load the js for that if those problems are used,
 # although those problems should also be rewritten to not use jquery-ui.
 sub load_js() {
-	ADD_JS_FILE('js/InputColor/color.js',    0, { defer => undef });
-	ADD_JS_FILE('js/Base64/Base64.js',       0, { defer => undef });
-	ADD_JS_FILE('js/Knowls/knowl.js',        0, { defer => undef });
-	ADD_JS_FILE('js/ImageView/imageview.js', 0, { defer => undef });
-	ADD_JS_FILE('js/Essay/essay.js',         0, { defer => undef });
+	ADD_JS_FILE('js/InputColor/color.js',          0, { defer => undef });
+	ADD_JS_FILE('js/Base64/Base64.js',             0, { defer => undef });
+	ADD_JS_FILE('js/Knowls/knowl.js',              0, { defer => undef });
+	ADD_JS_FILE('js/Problem/details-accordion.js', 0, { defer => undef });
+	ADD_JS_FILE('js/ImageView/imageview.js',       0, { defer => undef });
+	ADD_JS_FILE('js/Essay/essay.js',               0, { defer => undef });
 
 	if ($envir{useMathQuill}) {
 		ADD_JS_FILE('node_modules/mathquill/dist/mathquill.js', 0, { defer => undef });

macros/core/PGbasicmacros.pl

@@ -1182,8 +1182,24 @@ sub SOLUTION {
 	return "" if $solution_body eq "";
 
 	if ($displayMode =~ /HTML/) {
-		TEXT('<div class="knowl-container">',
-			knowlLink(SOLUTION_HEADING(), value => $solution_body, type => 'solution'), '</div>');
+		TEXT(tag(
+			'div',
+			class => 'solution accordion my-3',
+			tag(
+				'details',
+				class => 'accordion-item',
+				tag(
+					'summary',
+					class => 'accordion-button collapsed p-2',
+					tag('div', class => 'accordion-header user-select-none', SOLUTION_HEADING())
+					)
+					. tag(
+						'div',
+						class => 'accordion-collapse collapse',
+						tag('div', class => 'accordion-body', $solution_body)
+					)
+			)
+		));
 	} elsif ($displayMode =~ /TeX/) {
 		TEXT(
 			"\n%%% BEGIN SOLUTION\n"
@@ -1208,7 +1224,24 @@ sub HINT {
 	my $hint_body = hint(@_);
 	return unless $hint_body;
 	if ($displayMode =~ /HTML/) {
-		TEXT('<div class="knowl-container">', knowlLink(HINT_HEADING(), value => $hint_body, type => 'hint'), '</div>');
+		TEXT(tag(
+			'div',
+			class => 'hint accordion my-3',
+			tag(
+				'details',
+				class => 'accordion-item',
+				tag(
+					'summary',
+					class => 'accordion-button collapsed p-2',
+					tag('div', class => 'accordion-header user-select-none', HINT_HEADING())
+					)
+					. tag(
+						'div',
+						class => 'accordion-collapse collapse',
+						tag('div', class => 'accordion-body', $hint_body)
+					)
+			)
+		));
 	} elsif ($displayMode =~ /TeX/) {
 		TEXT(
 			"\n%%% BEGIN HINT\n"
@@ -1506,15 +1539,15 @@ sub END_ONE_COLUMN {    # deprecated
 sub SOLUTION_HEADING {
 	MODES(
 		TeX  => '{\\bf ' . maketext('Solution:') . ' }',
-		HTML => '<B>' . maketext('Solution:') . '</B> ',
+		HTML => maketext('Solution'),
 		PTX  => ''
 	);
 }
 
 sub HINT_HEADING {
 	MODES(
 		TeX  => '{\\bf ' . maketext('Hint:') . ' }',
-		HTML => '<B>' . maketext('Hint:') . '</B> ',
+		HTML => maketext('Hint'),
 		PTX  => ''
 	);
 }

t/pg_problems/problem_file.t

@@ -105,6 +105,7 @@ is(
 			{ file => 'js/InputColor/color.js',                   external => 0, attributes => { defer => undef } },
 			{ file => 'js/Base64/Base64.js',                      external => 0, attributes => { defer => undef } },
 			{ file => 'js/Knowls/knowl.js',                       external => 0, attributes => { defer => undef } },
+			{ file => 'js/Problem/details-accordion.js',          external => 0, attributes => { defer => undef } },
 			{ file => 'js/ImageView/imageview.js',                external => 0, attributes => { defer => undef } },
 			{ file => 'js/Essay/essay.js',                        external => 0, attributes => { defer => undef } },
 			{ file => 'node_modules/mathquill/dist/mathquill.js', external => 0, attributes => { defer => undef } },