WordPress.org

Ready to get started?Download WordPress

Forums

Javascript: Help with Toggle menu (5 posts)

  1. guzh
    Member
    Posted 6 years ago #

    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
  2. agressli
    Member
    Posted 6 years ago #

    I want to know that too!
    Could someone please help me?

  3. guzh
    Member
    Posted 6 years ago #

    no one?

  4. guzh
    Member
    Posted 6 years ago #

    *bump*

  5. evilhuman
    Member
    Posted 6 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic