I was trying to create a collapsible div that functions like a <select> element. However, I encountered an issue because you cannot insert an <img> into an <option>.
My goal was to mimic a "language selection" box similar to this example: https://i.sstatic.net/TpUSP.png
Unfortunately, when I click on the dropdown box in my replica, the different languages do not pop up as expected. The div does not expand or collapse.
This is the code I have been working with:
var coll = document.getElementsByClassName("languageSelect");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = document.getElementsByClassName("languageContainer");
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}.languageSelect {
overflow: hidden;
background-color: #6bca56;
height: 100px;
width: 100px;
position: absolute;
left: 0 !important;
top: 0 !important;
border: none;
}
.languageSelect:hover {
background-color: #5cae4a;
}
.selectedLanguageFlag {
overflow: hidden;
width: 45%;
height: 30%;
position: relative;
left: 10px;
top: 0%;
display: block;
}
.languageContainer {
z-index: 2;
position: absolute;
background-color: #5cae4a;
left: 0!important;
top: 100px !important;
width: 100px;
display: none;
}<button class="languageSelect"><img class="selectedLanguageFlag" src="images/language_sk_flag.png" /></button>
<div id="languageContainer" class="languageContainer">
<button><img src="images/language_cz_flag.png"/></button>
</div>