-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (75 loc) · 2.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion Web Component</title>
<script defer type="module" src="/src/main.ts"></script>
</head>
<body>
<div id="controls">
<button id="toggle" type="button" style="margin-bottom: 1rem">
Toggle accordion
</button>
<label>
Allow multiple open for group 1
<input type="checkbox" id="checkbox" />
</label>
</div>
<div id="app">
<accordion-group>
<p>Accordion group 1</p>
<accordion-item>
<div slot="header">
<h3>Header 1</h3>
</div>
<div>content</div>
<button type="button" id="add-child">Add child</button>
</accordion-item>
<accordion-item>
<div slot="header">
<h3>Header 2</h3>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non
nibh at nisl rutrum molestie ac vel ligula. Vivamus est orci,
commodo ac interdum nec, commodo in metus. Duis vitae eros turpis.
Aliquam efficitur eros iaculis commodo suscipit. Vestibulum blandit
arcu varius, pulvinar diam in, commodo lorem. Suspendisse tempus ex
et semper faucibus. Sed consequat, ligula sed luctus facilisis, erat
tortor ultricies magna, et sollicitudin felis tellus non elit.
Integer dictum ante felis, sit amet placerat dui dictum sed.
</p>
</accordion-item>
</accordion-group>
<accordion-group>
<p>Accordion group 2</p>
<accordion-item>
<div slot="header">Small header 1</div>
<div>content</div>
<label>
Input
<input type="text" />
</label>
</accordion-item>
<accordion-item>
<div slot="header">Small header 2</div>
<img
alt="Sample"
height="200"
width="200"
src="https://via.placeholder.com/200"
style="width: 100%"
/>
<a
href="https://placeholder.com/"
target="_blank"
rel="noreferrer noopener"
>
placeholder.com
</a>
</accordion-item>
</accordion-group>
</div>
</body>
</html>