Responsive web pages with Summary/Details and javascript.
Summary/Details closed on smaller devices, but forced open on wide screens.
These are the details. If the device has a screen wider than 768px, this section will be open. 768px is just slightly wider than a 720p tablet in portrait mode.
Using a JavaScript matchMedia() function we're able to determine screen width and set the open=true attribute accordingly. This is a handy way to leave details collapsed by default on small screen devices like phones, and automatically expand them on larger screen tablets and laptops.
Summary/Details one at a time on small screens. All details will be forced open on screens wider than 768px.
These are the details of summary one.
These are the details of summary two.
These are the details of summary three.