Skip to content

Commit 5d98a69

Browse files
bennadelbennadel
committed
Add scroll-to details demo.
1 parent 33f76ad commit 5d98a69

3 files changed

Lines changed: 175 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Linking To A Disclosure (Details) Element](https://bennadel.github.io/JavaScript-Demos/demos/scroll-to-details)
1314
* [Opening The Dialog Element As A Fly-out Sidebar](https://bennadel.github.io/JavaScript-Demos/demos/dialog-element-sidebar)
1415
* [Exploring The Dialog Element In HTML](https://bennadel.github.io/JavaScript-Demos/demos/dialog-element)
1516
* [Storing Metadata On Select Option Elements](https://bennadel.github.io/JavaScript-Demos/demos/select-option-dataset)

‎demos/scroll-to-details/index.htm‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
Linking To A Disclosure (Details) Element
7+
</title>
8+
<link rel="stylesheet" type="text/css" href="./main.css" />
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Linking To A Disclosure (Details) Element
14+
</h1>
15+
16+
<!--
17+
Note: I'm linking to the SUMMARY element, not to the details element, since only
18+
the summary element is actionable: it acts as the toggle for the details control
19+
and can be triggered with Space key or Enter key. It also provides labeling and
20+
context to accessibility software.
21+
-->
22+
<ul>
23+
<li>
24+
<a href="#summary1">Markdown Syntax</a>
25+
</li>
26+
<li>
27+
<a href="#summary2">Keyboard Shortcuts</a>
28+
</li>
29+
<li>
30+
<a href="#summary3">Privacy Policy</a>
31+
</li>
32+
</ul>
33+
34+
<details name="demo">
35+
<summary id="summary1">
36+
Markdown Syntax
37+
</summary>
38+
<section aria-labeledby="summary1">
39+
You can use limited Markdown syntax in your content.
40+
</section>
41+
</details>
42+
43+
<details name="demo">
44+
<summary id="summary2">
45+
Keyboard Shortcuts
46+
</summary>
47+
<section aria-labeledby="summary2">
48+
You can use the following keyboard shortcuts in the application.
49+
</section>
50+
</details>
51+
52+
<details name="demo">
53+
<summary id="summary3">
54+
Privacy Policy
55+
</summary>
56+
<section aria-labeledby="summary3">
57+
All your data is belong to us!
58+
</section>
59+
</details>
60+
61+
<script type="text/javascript">
62+
63+
// When the page first loads, or whenever the location hash changes, check to see
64+
// if the hash points to a disclosure summary. If so, ensure that the disclosure
65+
// is open. The browser will handle the focus automatically (via the hash).
66+
window.addEventListener( "load", applyHashEventToSummary );
67+
window.addEventListener( "hashchange", applyHashEventToSummary );
68+
69+
// Expand details is the summary is the target of the hash.
70+
function applyHashEventToSummary( event ) {
71+
72+
// The ":target" pseudo selector matches the element linked-to via the hash.
73+
var summary = document.querySelector( ":target:is(summary)" );
74+
var details = summary?.parentElement;
75+
76+
if ( details && ! details.open ) {
77+
78+
details.open = true;
79+
80+
}
81+
82+
}
83+
84+
</script>
85+
86+
</body>
87+
</html>

‎demos/scroll-to-details/main.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
2+
:where( html ) {
3+
box-sizing: border-box ;
4+
5+
& *,
6+
& *:before,
7+
& *:after {
8+
box-sizing: inherit ;
9+
}
10+
}
11+
12+
:where( * ) {
13+
&:focus,
14+
&:focus-visible {
15+
animation-duration: 200ms ;
16+
animation-fill-mode: forwards ;
17+
animation-iteration-count: 1 ;
18+
animation-name: outlineEnter ;
19+
animation-timing-function: ease-out ;
20+
outline-color: hotpink ;
21+
outline-offset: 4px ;
22+
/* outline-style: solid ; */
23+
outline-width: 2px ;
24+
}
25+
}
26+
27+
@keyframes outlineEnter {
28+
from {
29+
outline-offset: 8px ;
30+
}
31+
to {
32+
outline-offset: 4px ;
33+
}
34+
}
35+
36+
body {
37+
font-family: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif ;
38+
font-size: 18px ;
39+
line-height: 1.4 ;
40+
}
41+
42+
button,
43+
input:where([type="text"]),
44+
select,
45+
textarea {
46+
color: inherit ;
47+
font-family: inherit ;
48+
font-size: 20px ;
49+
line-height: inherit ;
50+
padding: 5px 10px ;
51+
}
52+
53+
button {
54+
padding: 5px 15px ;
55+
}
56+
57+
a {
58+
color: red ;
59+
}
60+
61+
details {
62+
border: 1px solid #cccccc ;
63+
margin-block-start: 10rem ;
64+
padding: 10px ;
65+
66+
&[ open ] {
67+
background-color: #f0f0f0 ;
68+
}
69+
70+
& > summary {
71+
cursor: pointer ;
72+
scroll-margin-block-start: 35px ;
73+
74+
/*
75+
By default, the browser doesn't appear to give an outline to the summary
76+
element. As such, I'm explicitly giving it an outline when focused.
77+
*/
78+
&:focus,
79+
&:focus-visible {
80+
outline-style: solid ;
81+
}
82+
}
83+
84+
& > section {
85+
margin: 10px 0 0 0 ;
86+
}
87+
}

0 commit comments

Comments
 (0)