Skip to content

Keep dropdown menu open after page refresh

There is a form inside my dropdown menu for logging in. If the user submits that form but the login details were wrong the page get refreshed and the dropdown menu closes. How do i keep the dropdown menu in an open state after refresing that page?



First, I would check to see if there is a way to submit the form without a page refresh, by making the request asynchronously and prevent the default behavior of a page refresh. So in your form submit, you can just do: event.preventDefault() And then handle the request asynchronously. That way, you will preserve your state.

But if you really need to do a page refresh for some reason, then I would perhaps use Local Storage for that. So, you can store some flag in the browser’s local storage which checks to see if the drop down was in an open state, like: localStorage.setItem('dropdownWasOpen', 'true');

And then whenever the page is refreshed, you read from the local storage again with localStorage.getItem('dropdownWasOpen').

User contributions licensed under: CC BY-SA
6 People found this is helpful