How to keep a collapsible menu open

New coder here trying to work with an piece of code that is not mine. I only know very limited javascript, so I am not sure how to achieve what I want. My page is also being coded in PHP, but I don’t think any PHP applies to this issue.

My page basically has 2 sections. Section 1, is a collapsible menu on the left side of the screen. Section 2 is the remainder of the screen.

When I make a selection from the menu, it targets back to the page and passes a variable on the URL. What appears on Section 2 depends on the variable passed.

However, right now when I do this with the existing code I have, when I make a selection on the expanded area of the menu, then it all collapses when the page reloads.

How do I keep the menu section open that I was currently on?

I believe it will involve saving a variable – based on what I have been reading, I think I would like to save the variable via session (sessionStorage).

	<div class="actions-menu">
		<button type="button" class="collapsible">My Collections</button>
		<div class="content">
			<p class="submenu"><a href="?action=collection_view">View My Collections</a></p>
			<p class="submenu"><a href="?action=collection_add">Add a Set</a></p>
			<p class="submenu"><a href="?action=collection_edit">Edit a Set</a></p>
			<p class="submenu"><a href="?action=collection_delete">Delete a Set</a></p>
		</div>
		<button type="button" class="collapsible">Gallery Tags</button>
		<div class="content">
			<p class="submenu"><a href="?action=tag_mini">Add Tags to a Mini</a></p>
			<p class="submenu"><a href="?action=tag_names">Add Tag Names</a></p>
            <p class="submenu"><a href="">Add Tag Types</a></p>
        </div>

		<script>
			var coll = document.getElementsByClassName("collapsible");
			var i;

			for (i = 0; i < coll.length; i++) {
			  coll[i].addEventListener("click", function() {
				this.classList.toggle("active");
				var content = this.nextElementSibling;
				if (content.style.display === "block") {
				  content.style.display = "none";
				} else {
				  content.style.display = "block";
				}
			  });
			}
		</script>
	</div>

Here’s some good information on using session storage.

You’ll want to do two things:

  1. When the page loads check if session storage has information about the menu. If it’s there, then do something.
  2. When a menu selection is made, add that info to the session storage.

Thank you for that link Paul. That really helps me with the syntax needed for using sessionStorage.

I’m not sure how to use this though with the code example that I used though.

When using sessionStorage.setItem(‘key’, ‘value’); I’m not sure how to integrate it. My value I guess is going to be “block” but I don’t have a key to assign that to. Could you please indicate how I would integrate this into the code. I just can’t figure it out.

As it’s information about the menu that you’re wanting to save, a key of “leftmenu” is suitable.
The value can be a unique id of the menu item that was selected.

Something similar:

Hi all, I have spent some time reviewing the code that sibertius displayed. The problem with that code, is that without the HTML, I don’t have the reference points which I require to understand this.

I do not know javascript – at all. Trying to figure out what components to use from that code to use my mode code is not something that I am capable of doing at this time.

Can someone please help me out with this. I have created a codepen for this example:

I know I have to set a session variable and then check it being set, but again I’m really not sure how to incorporate this.

What changes do I need to make to my javascript code to make this work?

Also, I noticed that sibertius’ example used a “close” function instead of toggling between the block display… is that a better method for doing this?

here is the html: http://94.237.92.101:3030

Unless I am missing something, that just links to the example home page which is blank.

I have also assigned an id name to each menu section, as it makes sense to me that likely I would have to have javascript get the current state of each id and assign that to separate session variables?

http://94.237.92.101:3030/mytopics

Still empty?

The trick is to rely only on the stored status. Based on the status of session or localstore, you add or remove the open status of each item. And using accordion style you can use classes instead of id’s.

When you refresh the page, the status must be restored.

window.addEventListener("DOMContentLoaded", (event) => {
  function(refresh) {
     if (localStorage.panel == "open") {
        Your code here....
     }
}, true);

I do not have the skills to give you the exact code.