<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
link
rel
=
"stylesheet"
href
=
<
script
type
=
"text/javascript"
src
=
</
script
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0"/>
<
style
>
.card-panel{
border: thin solid green;
}
</
style
>
</
head
>
<
body
class
=
"container"
>
<
h3
>Collapsible in Materialize:</
h3
>
<
div
class
=
"card-panel"
>
<
h4
>Simple Collapsible</
h4
>
<
ul
class
=
"collapsible"
data-collapsible
=
"accordion"
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>
favorite</
i
>
First Option
</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
>
</
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>history</
i
>
Second Option
</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
>
</
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>
home</
i
>Third Option
</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
</
ul
>
</
div
>
<
div
class
=
"card-panel"
>
<
h4
>Expandable Collapsible</
h4
>
<
ul
class
=
"collapsible"
data-collapsible
=
"expandable"
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>favorite
</
i
>First Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>
history</
i
>Second Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>
whatshot</
i
>Third Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
</
ul
>
</
div
>
<
div
class
=
"card-panel"
>
<
h4
>Pop-out Collapsible</
h4
>
<
ul
class
=
"collapsible popout"
data-collapsible
=
"accordion"
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>
favorite</
i
>First Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>history
</
i
>Second Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>whatshot
</
i
>Third Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
</
ul
>
</
div
>
<
div
class
=
"card-panel"
>
<
h4
>Pre-selected Collapsible</
h4
>
<
ul
class
=
"collapsible"
data-collapsible
=
"expandable"
>
<
li
>
<
div
class
=
"collapsible-header active"
>
<
i
class
=
"material-icons"
>
favorite</
i
>First Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>history
</
i
>Second Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>whatshot
</
i
>Third Option</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>GeeksforGeeks</
p
></
div
>
</
li
>
</
ul
>
</
div
>
<
script
src
=
</
script
>
</
body
>
</
html
>