unhiding HTML elements

[blackeagle2]

Hi!

I am looking on a way to unhide elements un html trough an href link & javascript.

For example

<div class="news">
 <span class="title">
 <a href="javascript:unhide(this);">Lorem Ipsum</a>
 </span>
</div>
<div style="display: none;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

When I click on the Lorem Ipsum link I want it to activate a function that will unhide the div that is right under the div with class news.

I really have hard with DOM, so if someone has a good tutorial in addition to a solution to this problem it would be welcome ;)

Thanks

[Bernard Marx]

Hi there.

<script type="text/javascript">
function setDisplay(id,value)
{
    document.getElementById(id).style.display = value;
}
</script>
<a href="#" onclick="setDisplay("lorem","block");return false;">Lorem Ipsum</a>
<div id="lorem" style="display: none;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

That should do it.

[blackeagle2]

Thanks but I don't want to use Ids, the problem is that I have multiple items like that and I don't want to create dynamic ids. ( "myitem1", "myitem2", "myitem3" ).

I would like to use a function that will in DOM get the next div right after the parent div of the a tag.

[Bernard Marx]

At the expense of a little more code, I have separated it into 2 functions, so the getSiblingElement function can be reused.

/* change corrupted ¦¦ chars for pipes */

<script type="text/javascript">
[green]/*----------------------------------------------
Cannot rely on nextSibling being an element
- it is likely to be an empty text node.
So iterate until
1) No more siblings, or
2) An element node is found.
-----------------------------------------------*/[/green]
function getSiblingElm(elm, drn)
{
    var strSibling = drn==-1? "previousSibling":"nextSibling";
    while( (elm=elm[strSibling]) && elm.nodeType!= 1){}
    return elm[red]¦¦[/red]null;
}
function displayNextElm(elm,boolShow)
{
    elm = getSiblingElm(elm)
    if(elm) elm.style.display = boolShow? "block":"none";
}
</script>
<a href="#" onclick="displayNextElm(this,1);return false;">
Lorem Ipsum</a>
<div style="display: none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

[blackeagle2]

Thanks this is a nicer solution :)

Unfortunately you have removed some html tags, which is really not easy for layout/design.

I have searched trough some documentation and I found that each element has a parentElement property. Unfortunetaly the code I managed to write does not seem to work.

function getSiblingElm(elm, drn)
{
 console(elm.parentElement.tagName);
 /* console outputs the text to the screen */
 var strSibling = drn==-1? "previousSibling":"nextSibling";
 while( (elm=elm[strSibling]) && elm.nodeType!= 1){}
 return elm¦¦null;
}

with

 <span class="titre">
 <a href="#" onclick="displayNextElm(this,1);return false;">Lorem ipsum</a>
 </span>
<div style="display: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

should output "span" to the screen as "span" is the parent element of "a" but I get nothing... any idea?

[Bernard Marx]

Hmm. Not sure about that.

Sorry about the mix up with structure. The quickest workaround is to use the same code as in msg #4, but amend the function call:

onclick="displayNextElm(this.parentElement,1);return false;"

To make everything more robust, you could give every "targetable" DIV a certain className. Then the function could search for, not the next sibling element of the parent, but the next element of that className in the tree. So the script relies only on order, not general structure.

That className could also be used to make the DIVs initially hidden too.

-----------------------------------------------------------------
change corrupted ¦¦ chars for pipes
-----------------------------------------------------------------

<style type="text/css">
div{width:200px; padding:10px;margin:10px;border: solid 1px lightblue;}
.thing{display:none;}
</style>
<script>
alert()
function getNextOfClass(refElm,targetClass)
{
  /* Use regexp test to allow multiple classes */
  var regTargetClass = new RegExp("\\b"+targetClass+"\\b");
  /* List all elms( inc IE5 workaround) */
  var elms = document.all¦¦document.getElementsByTagName("*");
  var k=-1, elm;
  /* Iterate till reference elm found */
  while( elms[++k]!= refElm ){};
  /* Now, look for elm with targ class */
  while( elm=elms[++k] )
    if( regTargetClass.test(elm.className))
      return elm;
}
function displayNext(refElm, boolShow)
{
  var elm = getNextOfClass(refElm, "thing");
  if(elm) elm.style.display = boolShow? "block":"none";
}
</script>
<div>
  <a href="#" onclick="displayNext(this,1);return false;"> Lorem Ipsum</a>
</div>
<div class="thing">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<a href="#" onclick="displayNext(this,1);return false;"> Lorem Ipsum</a>
<div class="thing">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

[blackeagle2]

Thanks I got it working the way I wanted it :)

Thanks very much for your help, it helped me alot!