Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change visibility of elements

Status
Not open for further replies.
xryancat

xryancat

Programmer
Aug 26, 2007
6
My html is like this
Code: 
<ul id="menu1">
   <li>
      <span>Edit</span>
      <div style="display: hidden;">
        Edit the Info
      </div>
   </li>

   <li>
      <span>Delete</span>
      <div style="display: hidden;">
        Delete the Info
      </div>
   </li>
</ul>

Whenever someone clicks on the <span>Whatever Text</span> I want all the other divs in the list to be hidden, and that one shown. So at any given time there is always only one, or none showing.

Any help would be greatly appreciated! :)
 
Sort by date Sort by votes
Is this for a class? There are so many things you are missing that I can't help but thing you want someone to do your homework for you. Forgive me if I am wrong.

Einstein47
“Evil abounds when good men do nothing.“ - Nelson R.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
I know how to toggle the display and everything, the only thing I can't grasp is the most simple way to hide the others when they aren't visible.
Code: 
document.getElementsByTagName("li").display.style = "none";

Shouldn't it be something like that?
 
Upvote 0 Downvote
Hi

[ul]
[li][tt]getElementsByTagName()[/tt] returns a Collection or Array ( depends on browser ). None of them has such property.[/li]
[li]Order matters. It is [tt].style.display[/tt].[/li]
[/ul]
Code: 
var list=document.getElementsByTagName('li');
for (var i=0;i<list.length;i++) list[i].style.display = 'none';

Feherke.
 
Upvote 0 Downvote
:-D Thank you! That worked perfectly! Now, what would be the simplest way to start a function every time one of the <li> tags is clicked.
Code: 
var x = document.getElementById("options").getElementsByTagName('li');
			for (var i=0;i<x.length;i++) x[i].onClick = show();
That automatically initiates show(); at the start of the script, without anyone clicking anything. I want show(); to start every time a <li> element is clicked.

I'm new at Javascript, so I'm not sure how it all works yet.

Thank you to everyone for your help so far.
 
Upvote 0 Downvote
Hi

That way you assign to [tt]x.onclick[/tt] the return value of the [tt]show()[/tt] function, not the [tt]show()[/tt] function itself. Remove the parenthesis ( () ) :
Code: 
for (var i=0;i<x.length;i++) x[i].on[red]c[/red]lick = [red]show[/red];

Feherke.
 
Upvote 0 Downvote
You are soo helpful!! :-D Thanks, mate!

Everything is working great. Except the show function needs to know what specific element was clicked, and then do something to only that element. How would I go about doing that?

Thanks again!
 
Upvote 0 Downvote
It returns this error:
Code: 
Error: missing formal parameter
Source Code: function show(this)

The function show() is this:
Code: 
function show (this)
{
	var list = document.this.style.display = 'block';
}

I'm thinking I just made another stupid mistake?
 
Upvote 0 Downvote
I figured out, I just changed the variable name, it now reads:
Code: 
function show( i )
{
	i.style.display = 'block';
}

But that doesn't seem to work either. . . No errors are returned, but the element's display isn't changed.
 
Upvote 0 Downvote
Hi

Well, your latest modification is correct. Syntactically. Logically, if you managed to click that [tt]li[/tt], it means it is already visible. ( By the way, the usual [tt]display[/tt] type of a [tt]li[/tt] is [tt]list-item[/tt]. Setting it to [tt]block[/tt] may have side effects. )

Unfortunately I kind of lost the goal in meantime. But quickly combined with the first code you posted in this thread, would look like this :
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
window.onload=function() {
  var x=document.getElementsByTagName('li');
  for (var i=0;i<x.length;i++) x[i].onclick=function() { show(this) }
}
function show(what)
{
  what.getElementsByTagName('div')[0].style.display='block'
}
</script>
</head>
<body>
<ul id="menu1">
<li>
<span>Edit</span>
<div style="display: none">
Edit the Info
</div>
</li>
<li>
<span>Delete</span>
<div style="display: none">
Delete the Info
</div>
</li>
</ul>
</body>
</html>

Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
679
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
633
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
575
coldbohemia
coldbohemia
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
451
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top