Auto opening of targeted feature examples

Author: felixgirault

site/index.html

@@ -155,17 +155,18 @@ <h3>Internationalization</h3>
 						></iframe>
 					</details>
 
-					<h3 id="styling">Styling</h3>
+					<h3 id="styling" data-example="styling-example">Styling</h3>
 
 					<p>
 						Orejime provides default styles that are easily customizable,
 						either via CSS variables, or by overriding the styles with
 						plain CSS.
 					</p>
 
-					<details>
+					<details id="styling-example">
 						<summary>Example</summary>
 						<iframe
+							style="min-height: 20lh"
 							data-src="./features/styling.html"
 							title="Example of styling"
 							loading="lazy"
@@ -395,6 +396,27 @@ <h3>Migrating from V2 to V3</h3>
 			document.querySelectorAll('details[open]').forEach(loadFeatureExample);
 		</script>
 
+		<!-- Auto opening of targeted feature examples. -->
+		<script>
+			const openFeatureExample = () => {
+				const hash = window.location.hash;
+				const target = document.getElementById(hash.slice(1));
+
+				if (!target) {
+					return;
+				}
+
+				const example = document.getElementById(target.dataset.example);
+
+				if (example) {
+					example.setAttribute('open', true);
+				}
+			};
+
+			openFeatureExample();
+			window.addEventListener('hashchange', openFeatureExample);
+		</script>
+
 		<!-- Migration form. -->
 		<script>
 			const migrationForm = document.querySelector('.MigrationForm--2-to-3');