<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Dropdown Content</
title
>
<
link
rel
=
'stylesheet'
href
=
<
link
rel
=
"stylesheet"
href
=
<
style
>
.container{
margin-top: 30px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class
=
"is-size-2 has-text-success"
>GeeksforGeeks</
h1
>
<
b
class
=
"is-size-4"
>Bulma Dropdown Content</
b
>
<
div
class
=
"container is-fluid"
>
<
div
class
=
"dropdown"
>
<
div
class
=
"dropdown-trigger"
>
<
button
class
=
"button"
aria-controls
=
"dropdown-menu1"
>
<
span
>Dropdown</
span
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-angle-down"
></
i
>
</
span
>
</
button
>
</
div
>
<
div
class
=
"dropdown-menu"
id
=
"dropdown-menu1"
role
=
"menu"
>
<
div
class
=
"dropdown-content"
>
<
div
class
=
"dropdown-item"
>
<
p
>This is a paragraph inside a
<
code
>div</
code
> element.
</
p
>
</
div
>
<
div
class
=
"dropdown-divider"
></
div
>
<
div
class
=
"dropdown-item"
>
<
button
class="button is-small
is-success">
GeeksforGeeks
</
button
>
</
div
>
<
div
class
=
"dropdown-divider"
></
div
>
class
=
"dropdown-item"
>
Go to Home Page.
</
a
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
var triggers =
document.querySelectorAll(".dropdown .dropdown-trigger");
triggers.forEach(function (trigger) {
var isopen = false;
trigger.addEventListener('click', function(){
if(isopen){
trigger.parentElement.classList.remove("is-active");
isopen = false;
}else{
trigger.parentElement.classList.add("is-active");
isopen = true;
}
})
});
</
script
>
</
body
>
</
html
>