Dummy Dummy - 3 years ago 173
Javascript Question

How do I toggle submenu items in a menu

I can't get the following code to work properly.
I have a simple menu.
One of the items contains a submenu.
I'd like it to collapse and uncollapse upon clicking the item.
For some reason it only uncollapses the first sub-item and not the rest.
I could not find a similar thread, thats why I am positing my question here.

All help is welcome



function toggleSubmenu(e) {
e.classList.toggle("active");
var panel = e.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}

.c-menu {
position: absolute;
width: 200px;
margin: 0px;
padding: 0;
background-color: #fff;
border-left: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.c-menu ul {
list-style-type: none;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 5px;
width: 100%;
height: 35px;
border: none;
border-bottom: 1px solid #CBCBCB;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.c-menu ul.active,
.c-menu ul:hover {
background-color: #EAEAEA;
}

.c-submenu {
list-style: none;
margin: 0;
padding: 0;
}

.c-submenu li {
border-bottom: 1px solid #CBCBCB;
height: 35px;
font-size: 14px;
padding: 10px 0 0 39px;
cursor: pointer;
}

.c-submenu li:hover {
background-color: #EAEAEA;
}

.c-panel {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='c-menu'>
<ul>A</ul>
<ul>B</ul>
<ul>C</ul>

<ul onclick='toggleSubmenu(this)'>OPEN</ul>
<ul class="c-submenu c-panel">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</div>




Answer Source

You need to toggle your panel.style.overflow property.

function toggleSubmenu(e) {
		e.classList.toggle("active");
		var panel = e.nextElementSibling;
		if (panel.style.maxHeight) {
			panel.style.maxHeight = null;
      panel.style.overflow = "hidden";
		} else {
			panel.style.maxHeight = panel.scrollHeight + "px";
      panel.style.overflow = "visible";
		}
	}
.c-menu {
  position: absolute;
  width: 200px;
  margin: 0px;
  padding: 0;
  background-color: #fff;
  border-left: 1px solid #CBCBCB;
  border-right: 1px solid #CBCBCB;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.c-menu ul {
  list-style-type: none;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  height: 35px;
  border: none;
  border-bottom: 1px solid #CBCBCB;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.c-menu ul.active,
.c-menu ul:hover {
  background-color: #EAEAEA;
}

.c-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-submenu li {
  border-bottom: 1px solid #CBCBCB;
  height: 35px;
  font-size: 14px;
  padding: 10px 0 0 39px;
  cursor: pointer;
  background-color: white;
}

.c-submenu li:hover {
  background-color: #EAEAEA;
}

.c-panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='c-menu'>
  <ul>A</ul>
  <ul>B</ul>
  <ul>C</ul>

  <ul onclick='toggleSubmenu(this)'>OPEN</ul>
  <ul class="c-submenu c-panel">
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <li>DD</li>
  </ul>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download