<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Dropup</
title
>
<
link
rel
=
'stylesheet'
href
=
<
link
rel
=
"stylesheet"
href
=
<
style
>
.container>p{
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 Dropup
</
b
>
<
div
class
=
"container is-fluid"
>
<
p
><
b
>Normal Dropdown:</
b
></
p
>
<
div
class
=
"dropdown"
>
<
div
class
=
"dropdown-trigger"
>
<
button
class
=
"button"
aria-controls
=
"dropdown-menu1"
>
<
span
>Select a topic</
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
>Algorithms</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>DBMS</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>Data Structures</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
p
><
b
>Dropdown with <
i
>is-up</
i
> modifier:</
b
></
p
>
<
div
class
=
"dropdown is-up"
>
<
div
class
=
"dropdown-trigger"
>
<
button
class
=
"button"
aria-controls
=
"dropdown-menu1"
>
<
span
>Select a topic</
span
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-angle-up"
></
i
>
</
span
>
</
button
>
</
div
>
<
div
class
=
"dropdown-menu"
id
=
"dropdown-menu1"
role
=
"menu"
>
<
div
class
=
"dropdown-content"
>
<
div
class
=
"dropdown-item"
>
<
p
>Algorithms</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>DBMS</
p
>
</
div
>
<
div
class
=
"dropdown-item"
>
<
p
>Data Structures</
p
>
</
div
>
</
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
>