In my attempt to create a unique custom select menu using html, css, and javascript, I encountered an issue with toggling the display style of the div containing the options when clicking on the button (in this case, an arrow).
HTML:<ul class="default_option_category_index">
<li>
<div class="option_allcategories">
<p>All Categories</p>
<button id="ArrowCategoryIndex" class="fa fa-chevron-up" onclick="showCategoriesIndex()"></button>
</div>
</li>
</ul>
<ul id="OptionsCategoryIndex" class="select_option_category_index">
//options
</ul>
#ArrowCategoryIndex{
transform: rotate(180deg);
}
.custom_select_box_1_index .select_option_category_index{
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
z-index: 1;
display: none;
}
function showCategoriesIndex() {
var arrow = document.getElementById("ArrowCategoryIndex");
var option_menu = document.getElementById("OptionsCategoryIndex");
if (option_menu.style.display === "none"){
option_menu.style.display = "block";
arrow.style.transform = "rotate(0deg)";
}
else if (option_menu.style.display = "block"){
arrow.style.transform = "rotate(180deg)";
option_menu.style.display = "none";
}
}
The challenge lies in the functionality of the "else if" part of the JavaScript code. Upon clicking the button for the first time, the menu displays properly. However, subsequent clicks do not toggle the menu as intended.