<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI Accordion Types</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
<
script
src
=
integrity
=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"ui text container"
>
<
h1
class
=
"ui green header center aligned"
>
GeeksforGeeks
</
h1
>
<
h3
class
=
"ui header center aligned"
>
Semantic UI Accordion Types
</
h3
>
<
h4
>Style Accordion:</
h4
>
<
div
class
=
"ui styled accordion"
>
<
div
class
=
"active title"
>
<
i
class
=
"dropdown icon"
></
i
> GeeksforGeeks
</
div
>
<
div
class
=
"active content"
>
<
p
>
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</
p
>
</
div
>
<
div
class
=
"title"
>
<
i
class
=
"dropdown icon"
></
i
> Semantic UI
</
div
>
<
div
class
=
"content"
>
<
p
>
Semantic UI is a modern framework used
in developing seamless designs for the
website, It gives the user a lightweight
experience with its components. It uses
the predefined CSS and jQuery to incorporate
in different frameworks.
</
p
>
</
div
>
<
div
class
=
"title"
>
<
i
class
=
"dropdown icon"
></
i
> HTML
</
div
>
<
div
class
=
"content"
>
<
p
>
HTML stands for HyperText Markup Language.
It is used to design web pages using markup
language.
</
p
>
</
div
>
</
div
>
</
div
>
<
script
>
$('.ui.accordion').accordion();
</
script
>
</
body
>
</
html
>