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.
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; } } 
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.
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(); }); 