Newer
Older
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
Accordion component
## Usage
<hy-docs-container>
<hy-accordion-container>
<hy-accordion-item accordiontitle="This is a accordion title">
Accordion content
</hy-accordion-item>
</hy-accordion-container>
</hy-docs-container>
```
<hy-accordion-container>
<hy-accordion-item accordiontitle="This is a accordion title">
Accordion content
</hy-accordion-item>
</hy-accordion-container>
```
## Multiple accordion items
<hy-accordion-container>
<hy-accordion-item accordiontitle="This is accordion item 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is accordion item 2">
<hy-grid-container>
<hy-grid-row>
<hy-grid-item columnsSm="12">
<hy-heading heading="h3">Lorem ipsum Heading</hy-heading>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-grid-item>
</hy-grid-row>
<hy-grid-row>
<hy-grid-item columns="12"><hy-heading heading="h4" section="subsection">Divider heading</hy-heading></hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-grid-item>
</hy-grid-row>
</hy-grid-container>
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is accordion item 3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</hy-accordion-item>
</hy-accordion-container>
```
<hy-accordion-container>
<hy-accordion-item accordiontitle="This is accordion item 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is accordion item 2">
<hy-grid-container>
<hy-grid-row>
<hy-grid-item columnsSm="12">
<hy-heading heading="h3">Lorem ipsum Heading</hy-heading>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-grid-item>
</hy-grid-row>
<hy-grid-row>
<hy-grid-item columns="12"><hy-heading heading="h4" section="subsection">Divider heading</hy-heading></hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
</hy-grid-item>
</hy-grid-row>
</hy-grid-container>
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is accordion item 3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</hy-accordion-item>
</hy-accordion-container>
```
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ----------- | -------- | ----------- |
| `accordiontitle` | `accordiontitle` | | `string` | `undefined` |
## Dependencies
### Depends on
- [hy-heading](../heading)
- [hy-icon](../icon)
### Graph
```mermaid
graph TD;
hy-accordion-item --> hy-heading
hy-accordion-item --> hy-icon
style hy-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
HY component demo