使用JavaScript显示另一个div时隐藏一个div

Question

I'm trying to create a with a "popup" submenu on click.

There's three separate submenus, and I can get them to show with Javascript, except they stack on top of each other. How can I hide the previously shown div when the next one is clicked?

Can I do this with pure CSS?

See this pen for more details.

Answer 1

You need to remember which was opened. Try this for your javascript function:

var current = null;
function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (current !== null) {
    current.style.display = 'none';
  }
  if (e == current) {
    return;
  }
  if (e.style.display == 'block') {
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
    current = e;
  }
}

Answer 2

Assign class names to the sub-menus. Before opening a new menu, get the sub-menus by class name, loop over them and hide them. Then open the selected one by id.

Answer 3

Using jQuery you can do something along this line :

    $(".submenu").click(function () {
      var currentSubMenu = $('.menu').find('.submenu.active');

      if (this === currentSubMenu)
        return;

      $(currentSubMenu).removeClass('active').hide();
      $(this).addClass('active').show();
    });