I have a problem on how to make my dropdown remain open after clicking and avoid closing after refresh.

Here's what I've done.

var dropdown = document.getElementsByClassName("dropdown_btn");
        var i;
        
        for (i = 0; i < dropdown.length; i  ) {
            dropdown[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var dropdownContent = this.nextElementSibling;
                if (dropdownContent.style.display === "block") {
                    dropdownContent.style.display = "none";
                } else {
                    dropdownContent.style.display = "block";
                }

            });
        }
        
        const currentLocation = location.href;
        const menuItem = document.querySelectorAll('a');
        const menuLength = menuItem.length
        for (let i = 0; i < menuLength; i  ) {
            if(menuItem[i].href === currentLocation){
                 menuItem[i].className = "active"
             }
         }

<button >
    <span>Sample</span>
</button>
<div >
    <a href="sample.php">Sample 1</a>
    <a href="sample.php">Sample 2</a>
</div>

CodePudding user response：

You can use the localStorage with a simply flag. On open the flag become true, on close the flag become false. For the refresh you need to test your var contains in localStorage. If is true, display the menu, if is false do not display the menu