Create a vertical expand/collapse menu using Javascript that persists its state even after a page change

As I embark on the journey of constructing my webshop, please forgive any imperfections you may stumble upon, unless they pertain to the subject at hand.

Currently, I am in the process of crafting the shop menu, utilizing a vertical collapse/expand menu built with javascript.

The issue I am facing is that when a link is clicked and the page switches to the destination, the menu closes/resets, which is not what I desire.

I would like for the menu to remain expanded even after the page has changed.

If anyone could assist me with this dilemma, it would be greatly appreciated.

For reference, here is a link to the website provided by my school:

javascripthtmlcsswordpressmenu

Answer №1

There are various methods to accomplish this, depending on whether you intend to utilize a web server or not, or have a database table specifically for user settings.

One approach that I have discovered involves utilizing the "Web Storage API" (visit this link: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)

It would be beneficial if you could provide some code samples so we can better understand your situation and offer potential solutions. (Additionally, if you share code samples, the suggestion of using Web Storage API may not be applicable based on your code, so please share)

Please refer to the comment below for a jsfiddle demonstration

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A function injected into a constructor of a class causes an undefined error

As I delve into learning about utilizing typescript for constructing API's, I have encountered a couple of challenges at the moment. Initially, I have developed a fairly straightforward PostController Class that has the ability to accept a use-case wh ...

javascriptnode.jstypescriptexpressmongoose

No alterations occur to the status upon removal of data from this location

const [items, setItems] = useManageItem([]); const handleRemoveItem = id => { const endpoint = `https://fierce-everglades-14403.herokuapp.com/item/${id}`; fetch(endpoint, { method: 'DELETE', }).then(response ...

javascriptreactjs

What is the importance of cloning React state before making changes or while working on it?

Someone advised me to always create a clone or copy of the react state before making any changes to it. const newState = [...this.state] newState.name = 'hardik' I'm still unsure about the reason behind this recommendation. Why shouldn&apos ...

javascriptreactjs

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

javascriptcsshtml

How to show line breaks in MySQL text type when rendering in EJS

In my MySQL table, I have a column called PROJ_ABOUT with the type TEXT. I have inserted several rows into this column and now I am trying to display this information in my Express.js app using the ejs engine. <h2>About project</h2> <p> ...

javascriptmysqlnode.jsexpressejs

Show off beautiful text using a styled pre component in a React application

I've been attempting to highlight specific text within a React pre element, but unfortunately, it doesn't seem to be working as expected. Instead of displaying the highlighted text, it shows [object Object]. const Text = styled.pre ` col ...

javascriptreactjs

Issue: Dynamic server is experiencing abnormal increase in usage due to headers on Next version 13.4

Encountering an error in the following function. It's a basic function designed to retrieve the token from the session. 4 | 5 | export async function getUserToken() { > 6 | const session = await getServerSession(authOptions) | ...

javascriptreactjsnext.jsnext-auth

Steps for utilizing response data as parameters for useInfiniteQueryHere is how you can make

On the specific page where I am implementing useInfiniteQuery const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, status } = useInfiniteQuery( ['posts', searchState], ({ pageParam = 1 }) => post.search({ . ...

javascriptreactjstypescriptreact-query

How can I easily apply indentation to a form in HTML?

I've spent a considerable amount of time searching for what I believed would be an easy solution, but have been unsuccessful so far. Here is the structure in question: <form action="<?= htmlspecialchars($_SERVER['PHP_SELF'], ENT_Q ...

htmlcss

The area available for clicking does not align correctly with the visible display of the div element

Is it possible to create clickable, animating sprites without relying on Flash? I want the sprites to show a bubble popup when clicked or touched, and then dismiss when the screen is clicked again. However, I'm facing an issue where the clickable area ...

htmlcsswebkitmobile-safariandroid-browser

Angular 14 troubleshooting: Issues with using getRawValue() in IndexOf function

In this scenario, I have a straightforward Person interface defined as: import { FormArray, FormControl, FormGroup } from '@angular/forms'; import { Address } from './address'; export class Person { id: FormControl<number>; n ...

javascriptangularindexof

What is the best way to attach a tag or label onto multiple objects so that it remains facing the camera whenever the user interacts with the objects?

My goal is to create a tag or label that always faces the camera when a user clicks on an object, even if that object is rotated. How can I achieve this? I've been advised to use an Orthogonal camera, but I'm not sure how to do that. Additionall ...

javascriptthree.jswebgl

Please submit the returned value from the form

Looking for some assistance with this source code... <form method="post" id="center" action=""> <br>Player Name: <?php echo $PlayerName; ?> <br>Note: <input type="text" name="note" value=<?php echo $Note ?> > <br> ...

phphtmlformspost

Various titles utilized in Axios patch requests

After spending an hour exploring the Chrome console, I'm still unable to pinpoint the source of this bug. I'm in the final stages of updating the OAuth implementation in my Vue app. It all started when socialLink.js discovered the need to creat ...

javascriptvue.jsaxios

Move the <div></div> element to the bottom of the webpage and center it

My HTML includes a <div>...</div> section that serves as a toolbar. Is there a method to position this section at the bottom of the webpage (document, not viewport) and align it to the center? ...

javascripthtmlcssajax

Mastering the art of debugging a mongoose action in node.js

I am utilizing mongoose for connecting my node.js app with mongoDB. However, I am facing an issue where the database does not get updated when I create or update a model instance. How can I effectively debug and identify what goes wrong in the create or up ...

javascriptnode.jsmongodbdebuggingmongoose

Is there a way to delete content in HTML after a particular text using Python and BeautifulSoup4?

I am currently in the process of scraping information from Wikipedia. My goal is to extract only the necessary data and filter out any irrelevant content such as See also, References, etc. <h2> <span class="mw-headline" id="See ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

The second AJAX function is executed prior to the completion of the first AJAX function

I am facing an issue with two consecutive ajax calls. The data received from the second ajax call needs to be processed in another function before being returned. After that, the combined data from both ajax responses is used to update a set of charts. Be ...

javascriptjqueryajax

Once the getComponent is fully executed, move on to the getIndexRoute function

Within my react-router routes, I implemented plainRoutes in the following manner: getComponent (nextState, cb) { require.ensure([], (require) => { const CoreLayout = require('../layouts/CoreLayout/CoreLayout').default const u ...

javascriptreactjsreduxreact-router