RickyKS

On 1/24/2017 at 5:02 PM, Ingolme said:

It is preferable to have code that validates, but don't judge us all by just one forum member.

To fix the remaining validation issue, just put a <title> element in the head.

 

To fix your first issue, each time a button is clicked, hide all of the menu elements, then show the one you need:

// For each button, assign an event handler
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", accordion);
}


// Event handler function
function accordion() {
  // Reset all of the elements
  for(var i = 0; i < acc.length; i++) {
    acc[i].classList.remove("active");
    acc[i].nextElementSibling.style.maxHeight = null;
  }

  // Toggle the "active" class for the current item
  this.classList.add("active");

  // Make the contents visible
  var panel = this.nextElementSibling;
  panel.style.maxHeight = panel.scrollHeight + 'px';
}

I am not experiencing the second issue you described. The container should expand to fit all its content, unless the content exceeds the browser's height.

--------------------------------------------------

When I input this code into my project, it works with the arrows correctly, where only one arrow will switch to the drop down, but the content is not being revealed. any help?