Title: Javascript: Help with Toggle menu
Last modified: August 19, 2016

---

# Javascript: Help with Toggle menu

 *  [guzh](https://wordpress.org/support/users/guzh/)
 * (@guzh)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/javascript-help-with-toggle-menu/)
 * this is the javascript i’m using;
 *     ```
       function toggle(x){
       var divx = document.getElementById('toggle'+x)
       if (divx.style.display == 'none') {
       divx.style.display = 'block'
       } else {
       divx.style.display = 'none'
       }
       }
       ```
   
 * I’ve only copy pasted the script, I’m not known with javascript at all.
    so describe
   it simple, please (:
 * Ok.
    So I got this submenu I like to show, it works fine except that if I click
   on the first one, and then the second one. They’ll be displayed under each other.
   I want only one at a time, so that when I click on the other one, the first disappears.
 * The HTML:
 *     ```
       <li><a id="displayID" href="javascript:toggle();" onclick="toggle(1)">Categories<br /><span>Browse freely</span></a></li>
       <li><a id="displayID" href="javascript:toggle();" onclick="toggle(2)">About<br /></a></li>
       	</ul>
       	<div id="toggle1" style="display: none;" class="submenu">
       		<ul>
       		<?php wp_list_cats('sort_column=name&optioncount=0&exclude=10, 15'); ?>
       		</ul>
       	</div
       	<div id="toggle2" style="display: none;" class="submenu">
       		<ul>
       		<li>Me</li>
       		<li>The Project</li>
       		<li>The Site</li>
       		</ul>
       	</div
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [agressli](https://wordpress.org/support/users/agressli/)
 * (@agressli)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/javascript-help-with-toggle-menu/#post-761428)
 * I want to know that too!
    Could someone please help me?
 *  Thread Starter [guzh](https://wordpress.org/support/users/guzh/)
 * (@guzh)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/javascript-help-with-toggle-menu/#post-761463)
 * no one?
 *  Thread Starter [guzh](https://wordpress.org/support/users/guzh/)
 * (@guzh)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/javascript-help-with-toggle-menu/#post-761494)
 * *bump*
 *  [evilhuman](https://wordpress.org/support/users/evilhuman/)
 * (@evilhuman)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/javascript-help-with-toggle-menu/#post-761495)
 * I have no idea how much flexibility or control you have over the HTML in your
   situation, but this below is how I would do it. Actually, I should say, this 
   isn’t _precisely_ how I would do it, but it’s as close to your current methodology
   as I could be while changing what I thought was appropriate.
 * Firstly I’ve made some changes to the HTML:
 *     ```
       <ul>
       	<li><a id="cat" href="#">Categories<br /><span>Browse freely</span></a></li>
       	<li><a id="about" href="#">About<br /></a></li>
       </ul>
       <div id="toggle1" style="display: none;" class="submenu">
       	<ul>
       		<?php wp_list_cats('sort_column=name&optioncount=0&exclude=10, 15'); ?>
       	</ul>
       </div>
       <div id="toggle2" style="display: none;" class="submenu">
       	<ul>
       		<li>Me</li>
       		<li>The Project</li>
       		<li>The Site</li>
       	</ul>
       </div>
       ```
   
 * The _href=”javascript…_ was unnecessary. It was calling a function without a 
   required argument and throwing a javascript error in the browser. You need something
   in the href so, unless there are actual Categories/About options pages to fall
   back on unobtrusively, just use href=”#”. The javascript will disable the href
   click event anyway. The js will also assign a new click event (the toggle function)
   so there is no need for an onclick attribute in the HTML. I have given the links
   specific IDs – I realise this may be where my answer doesn’t work for you if 
   are working to some restriction I am unaware of.
 * On to the javascript:
 *     ```
       function init()
       {
       	var toggle_c = document.getElementById('cat');
       	toggle_c.onclick = function() { toggle(1); return false; };
   
       	var toggle_a = document.getElementById('about');
       	toggle_a.onclick = function() { toggle(2); return false; };
       }
       function toggle(n)
       {
       	var div_n = document.getElementById('toggle' + n);
       	div_n.style.display = (div_n.style.display == 'none' ? 'block' : 'none');
   
       	var div_not_n = document.getElementById('toggle' + (n == 1 ? 2 : 1));
       	div_not_n.style.display = 'none';
       }
       window.onload = function() { init(); }
       ```
   
 * Two functions, one (init) to initialise the links, one (toggle) to do what you
   originally wanted. A window.onload event ensures the page is fully loaded before
   the init function is called to set up the links. Init assigns the toggle function
   to the links’ click events and returns false to disable the href redirect that
   they had as standard. The toggle function works on whichever div is relevant 
   to the current click, then the other. Firstly it grabs whichever the other div
   is and hides it with display = ‘none’. Secondly it sets the display value to 
   block or none, depending on the click’s current state, as your original function
   did, albeit in a short-hand ternary stylee.
 * Hope that helps – it definitely works in an isolated example. I’ve made a couple
   of assumptions about what is and isn’t allowed in your HTML there. I’m not overly
   familiar with WordPress itself and stumbled across your question in passing, 
   but I’ll try to check back in case you can’t use it.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Javascript: Help with Toggle menu’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/)
 * 4 replies
 * 3 participants
 * Last reply from: [evilhuman](https://wordpress.org/support/users/evilhuman/)
 * Last activity: [17 years, 10 months ago](https://wordpress.org/support/topic/javascript-help-with-toggle-menu/#post-761495)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics