2 replies to this topic

[lha15991]

Hi I'm trying to make a navigation bar with a dropdown menu of sorts, but the list items in the drop down are the same across the different top level categories that I have.

<script type="text/javascript"> 

			function toggle(hidden, visible) {

				var ele = document.getElementById("hidden");

				var text = document.getElementById("visible");

				if(ele.style.display == "block") {

			        ele.style.display = "none";

			  	}

				else {

					ele.style.display = "block";

				}

				} 

		</script>

<div id="categories">

	<ul>

		<li>

			<a id="visible" class="one"  href="javascript:toggle();">Community</a>

				<div id="hidden" style="display:none">

						<div class="center-nav"> 

							<ul> 

								<li><a href="#">activities</a></li> 

								<li><a href="#">artists</a></li> 

								<li><a href="#">childcare</a></li>

								<li><a href="#">general</a></li> 

								<li><a href="#">groups</a></li> 

									</ul>

						</div>

						<div class="center-nav"> 

							<ul>

								<li><a href="#">pets</a></li>

								<li><a href="#">events</a></li> 

								<li><a href="#">lost+found</a></li> 

								<li><a href="#">musicians</a></li> 

								<li><a href="#">local news</a></li>

							</ul>

						</div>

						

			</li>

				

			<li>

			<a id="visible" class="two"  href="javascript:toggle();">Personals</a>

				<div id="hidden" style="display:none">

						<div class="center-nav"> 

							<ul> 

								<li><a href="#">strictly platonic</a></li>

								<li><a href="#">women seeking women</a></li> 

								<li><a href="#">women seeking men</a></li>

								<li><a href="#">men seeking women</a></li> 

								<li><a href="#">men seeking men</a></li> 

							</ul>

						</div>

						<div class="center-nav"> 

							<ul>

								<li><a href="#">misc romance</a></li>

								<li><a href="#">casual encounters</a></li> 

								<li><a href="#">missed connections</a></li> 

								<li><a href="#">rants and raves</a></li> 

							</ul>

						</div>

					</div> 

				</li>

So again the problem I'm having is that when I click on either Community or Personals, the drop down menu only displays the list items from Community. If someone could help me with this I'd really appreciate it.

[James Prickett]

There are a few problems. First, you defined toggle() function to take in two parmaters but never use them. Second, you have duplicate ID's in the HTML. ID's should always be unique. Change your HTML as such:

<a id="personals-link" class="two"  href="javascript:toggle('hidden-personals');">Personals</a>

				<div id="hidden-personals" style="display:none">

Then change your JavaScript function to use the passed in ID as such:

<script type="text/javascript"> 

			function toggle(id) {

				var ele = document.getElementById(id);

				var text = document.getElementById("visible");

				if(ele.style.display == "block") {

			        ele.style.display = "none";

			  	}

				else {

					ele.style.display = "block";

				}

				} 

So basically you need to pass a unique ID into the JavaScript function and then use that parameter in your function. In your code you are not sending in any paramters and always getting the element called "hidden" which always grabs the first instance it finds in the HTML.

Hope that helps.

P.S. I would also recommend you look at jQuery. You can do what you want to do using jQuery with one line of code.

[xx3004]

I suggest the better way, my personal idea, and with this method, you don't need to worry about id or whatever, because it passes the OBJECT as the parameter.

<a id="visible" class="one"  href="javascript:toggle(this);">Community</a>

<div id="hidden" style="display:none">

And the javascript:

<script language="javascript" type="text/javascript"> 

function toggle(obj){

if(obj.nextSibling.style.display=="block")

	{

	obj.nextSibling.style.display="none";

	}

else

	{

	obj.nextSibling.style.display="block";

	}

}

And one more IMPORTANT QUESTION for you, let's take a look at your original script:

<script type="text/javascript"> 

function toggle(hidden, visible) {

var ele=document.getElementById("hidden");

var text=document.getElementById("visible");

if(ele.style.display=="block")

	{

	ele.style.display="none";

	}

else

	{

	ele.style.display="block";

	}

} 

		</script>

The question is:
1) What is the variable text used for? I didn't see you use it.
2) What exactly do you want to use by var "ele=document.getElementById("hidden");", is the "hidden" a string as an ID or a parameter passed by a function toggle(hidden, visible)? It makes a total differences and may result in error for your script.

Regards,
[x]