Open accordion with CSS

OK, I was looking for exactly the same thing. BUT: it’s not CSS, neither JS, it’s a HTML Element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

And after a quest, I found no way to alter the open/close state of the details in any other way than by changing the open-attribute.

You could argue you don’t want to alter the native behaviour on print: a visitor gets what’s on the page. They can open the details themselves and then print the page; the content will be revealed and printed.

If you do want to force the behaviour; it’s JavaScript. I used this code:

// force details/summary to open on print
function forceDetailsOpen() {
	const allDetailsElements = document.querySelectorAll('details');
	Array.prototype.forEach.call( allDetailsElements, function( detailElement ) {
		detailElement.setAttribute('open', 'open');
	});
}
window.addEventListener( "beforeprint", forceDetailsOpen );

// polyfill for safari
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
	if(mql.matches) {
		forceDetailsOpen();
	}
});