I'm working with a dropdown that contains <a> tags and is initially set to be hidden. There's also a caret next to the dropdown that rotates down when the dropdown is open. What I'm trying to achieve is keeping the dropdown open (caret down) even after clicking an element inside it, and ideally have the selected element stay highlighted on the next page without using any form of storage like localStorage or Sessions. Can anyone provide some guidance or an example of how this could be accomplished?
<div class="client dropdownSideBar" id="cl">
<button class="dropdown-btn font_24 font_white">
CLIENT
</button>
<div class="dropdown-container" id="dropdown-menu">
<a>Element1</a><br>
<a>Element2</a><br>
</div>
</div>
/* keep the caret aligned */
#cl .dropdown-btn::before {
margin-left: 115px;
}
.dropdown-btn::before {
display: inline-block;
content: "\25BC"; /* caret content */
transition: transform 0.3s;
transform: rotate(270deg);
float: right;
}
.dropdownSideBar.is-open .dropdown-btn:before {
transform: rotate(-360deg);
color: white;
}
.dropdownSideBar.is-open .font_white {
background-color: #575757;
width: 100%;
color: white;
}
.dropdownSideBar.is-open .dropdown-container {
display: block;
}
/* hidden by default, make the content shifts under the title */
.dropdown-container {
display: none;
font-size: 18px;
padding-top: 10px;
background-color: #575757;
}
.dropdown-container a {color: white; padding-left: 30px;}
.dropdown-container a:hover {background-color: #414141;}
Javascript code snippet for displaying the dropdown menu upon client click and ensuring only one dropdown is open at a time
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
var indexOfSelectedElement = window.location.pathname;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
//hide the nonclicked
if (el !== dropdownContent) {
el.style.display = 'none';
}
});
if (dropdownContent.style.display === "block")
dropdownContent.style.display = "none";
else
dropdownContent.style.display = "block";
});
}
//get the three Dropdowns
const dropdowns = document.querySelectorAll(".dropdownSideBar");
dropdowns.forEach(el => {
const button = el.querySelector(".dropdown-btn");
button.addEventListener("click", () => {
const caret = document.getElementById('caret');
// Close all
[...dropdowns].filter(x => x != el).forEach(el => el.classList.remove("is-open"));
// Toggle one
el.classList.toggle("is-open");
});
});
Demo: https://jsfiddle.net/dgLfjxn2/ Update: I attempted to address this using the URL. The issue I'm encountering is that the caret rotation isn't happening, and when I click on the client, the after selector is being applied. However, I'm still not able to get the element selected once redirected to the new page.
var menu = document.getElementById('dropdown-menu');
var client = document.getElementById('clientButton');
var id = indexOfSelectedElement.substr(14, indexOfSelectedElement.lastIndexOf('/') - 14);
if(indexOfSelectedElement.substr(0, 14) === "/fleet/client/") {
menu.style.display = 'block';
menu.style.backgroundColor = '#575757';
client.style.backgroundColor = '#575757';
client.style.color = 'white';
//TODO: keep the clicked client selected on the redirected page?, rotate the caret, when client is clicked again backgroundColor and caret are in the after selector.
}